React中常见的TypeScript用法

1、组件定义

• 类组件

  interface SelfProps{}
  interface SelfState{}
  
  class MyComponent extends React.Component<SelfProps, SelfState>{}

  class MyComponent<P> extends React.Component<P>{
    interProps: P;
    constructor(props){
      super(props);
      this.interProps = p;
    }  
  }
  
  // 在使用该组件时
  
  types SelfProps = {...}
  
  <MyComponent<SelfProps> ... ></MyComponent> // 省略号表示需要传入的prop

• 函数组件

  interface SelfProps{}
  
  const Fnc = (props: SelfProps) => {}

  // 使用泛型
  interface SelfProps {}
  
  const fnc:React.FC<SelfProps> = (props) => {}

  // 如果在使用函数组件时不清楚props的类型，那么还是使用泛型来定义
  
  function MyComponent<P>(props: P){} // 普通函数定义
  const MyComponent = <P extends any>(props: P) => {} // 箭头函数
  
  <MyComponent ... ></MyComponent>