비 계 를 설치 하 다

npm install -g create-react-app

프로젝트 생 성

create-react-app proName --typescript

소 칼 을 조금 시험 해 보다.
ts 코드 주석 을 컴 파일 러 오류 알림 을 볼 수 있 습 니 다.
Class 구성 요소
폴 더 아래 생 성src

import React, { Component } from "react";
//   props name  ，    string  (         props.name   )
interface IProps {
  name: string;
}
//   state color      red  blue
interface IState {
  color: "red" | "blue";
}
export default class Home extends Component {
  constructor(props: IProps) {
    super(props);
    this.state = {
      color: "red"
    };
  }
  render() {
    return (
      

        
          {this.props.name}    !
        
        

        change color
      
    );
  }

  changeColor = () => {
    let color = this.state.color;
    if (color === "red") {
      this.setState({
        color: "blue"
      });
    } else {
      this.setState({
        color: "red"
      });
    }
  };
}

도입

import React} from "react";
import "./App.css";
// import 
import Home from "./pages/home/Home";
function App() {
  return (
    

      {/*   Home  ，  Home    name: string;      */}
      
    
  );
}
export default App;

함수 식 구성 요소
폴 더 아래 생 성pages/home/Home.tsx

/*        */
import React from "react";

// props  count，increment，decrement，     
interface IProps {
  count: number;
  increment: () => void;
  decrement: () => void;
}

const Counter = ({ count, increment, decrement }: IProps) => {
  return (
    

      
{count}
      +
      -
    
  );
};

export default Counter;

도입

import React, { useState, useCallback } from "react";
import "./App.css";
import Counter from "./pages/counter/Counter";
function App() {
  const [count, setCount] = useState(1);
  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  const decrement = useCallback(() => {
    setCount(count - 1);
  }, [count]);

  return (
    

      {/*      count、increment、decrement  ，      */}
      
    
  );
}

export default App;

고급 구성 요소
폴 더 아래 생 성App.tsx

/*         */
import React, { Component } from "react";

export class App extends Component {
  render() {
    return (
      

        
react
        
React.js            
      
    );
  }
}

/*    Com   ，   any，   const CopyrightApp = withCopyright(123);           ，         ，  withCopyright(       )*/
//   Com react    
const withCopyright = (Com: React.ComponentType) => {
  return class extends Component {
    render() {
      return (
        <>
          
          
@copyright;      xxx
        >
      );
    }
  };
};

const CopyrightApp = withCopyright(App);

export default CopyrightApp;

도입

import React from "react";
import "./App.css";
import Hoc from "./pages/components/Hoc";
function App() {
  return (
    

      
    
  );
}

export default App;

Event
폴 더 아래 생 성src

import React, { ReactNode } from "react";

//  interface  
type IProps = {
  // react    
  children: ReactNode;
  // react       
  click(e: React.MouseEvent): void;
};
const Button = (props: IProps) => {
  return (
    

      {props.children}
    
  );
};

export default Button;

도입

import React, { useState, useCallback } from "react";
import "./App.css";
import Button from "./pages/components/Button";
function App() {
    //     e        any，    e.         ，   e   React.MouseEvent   ，e.        （       ）
  const click = useCallback((e: React.MouseEvent) => {
    console.log(e);
  }, []);
  return (
    

      button test
    
  );
}

export default App;