codesandbox 链接

组件定义

以一个输入框组件为例，这里分别展示类组件和函数组件上关于ts的实践

类组件

  1. import React from 'react';
  3. export interface IInputProps {
  4.   value?: string;
  5.   defaultValue?: string;
  6.   onChange?: (value?: string) => void;
  7. }
  9. interface IInputState {
  10.   innerValue: string;
  11. }
  13. class Input extends React.Component<IInputProps, IInputState> {
  14.   // 设置默认props
  15.   // 这里的类型需要设置成Partial，因为有些非空类型在默认props上不是必须的
  16.   static defaultProps: Partial<IInputProps> = {
  17.   defaultValue: '',
  18. };
  20. // 此处声明类组件的状态
  21. state: IInputState = {
  22.   // 组件内初始状态由props上传入的defaultValue初步决定
  23.   // 若没有传入defaultValue，再自行使用内部决定的初始值
  24.   innerValue: this.props.defaultValue ?? '',
  25. };
  27. componentDidUpdate(prevProps: IInputProps, prevState: IInputState) {
  28.   // 使用 componentDidUpdate 时需要声明相应的 props 和 state 类型
  29. }
  31. /**
  32. * 通过判断是否有在props上传入value字段确认是否为受控组件
  33. */
  34. get isControlled() {
  35.   return 'value' in this.props;
  36. }
  38. /**
  39. * 当前展示出来的内容
  40. * 如果是受控模式，展示外部value
  41. * 如果是非受控模式，展示内部innerValue
  42. */
  43. get displayValue() {
  44.   return this.isControlled ? this.props.value : this.state.innerValue;
  45. }
  47. handleChangeValue = (value?: string) => {
  48.   // 如果是非受控组件，那么需要维持内部的状态
  49.   if (!this.isControlled) {
  50.     this.setState({ innerValue: value ?? '' });
  51.   }
  52.   // 不论当前组件是否受控/非受控，都需要保证触发props.onChange
  53.   this.props.onChange?.(value);
  54. };
  56. // 此处的类型声明，可以移动到 <input /> 标签的 onChange 属性上，会有相应的类型提示
  57. handleInputChange: React.InputHTMLAttributes<HTMLInputElement>['onChange'] = (
  58.   event,
  59. ) => {
  60.   this.handleChangeValue(event.target.value);
  61. };
  63. render() {
  64.   return (
  65.     <input value={this.displayValue} onChange={this.handleInputChange} />
  66.   );
  67. }
  68. }
  70. export default Input;

在类组件上使用ts，主要注意点包括以下方面：

  1. 继承自React.Component需要声明props和state的类型，通常组件的IProps需要导出，但是IState一般不导出image.png打开React.Component的类型声明，你可以发现这个泛型的默认类型是{}，也就是说，如果你的类组件不声明任何泛型，那么ts直接就不允许你在this.props或this.state上操作任何属性image.png最坏的打算就是写.tsx文件时extends React.Component<any, any>
  2. 类组件的defaultProps可以以static属性设置，但是需要手动声明类型，因为组件的默认props只是IProps的局部配置，所以这里使用一个ts工具类型Partialimage.png
  3. 类组件的state可以以类字段的方式声明，此时需要自己手动去标注类型是IStateimage.png也可以使用constructor去声明，但是却需要声明constructor上props的类型image.png不论使用哪一种方式，都避不开需要手动声明类型，React.Comopnent上的泛型并没有智能到可以推断构造函数时的state类型
  4. 使用一些生命周期函数时，有些地方的类型避免不了需要自己去声明，例如使用componentDidUpdate需要自己声明props和state的类型image.png
  5. 使用其他组件的props时，声明类型可以通过代码提示去实现，例如本例子中的<input />标签的onChange函数，可以通过鼠标悬浮到上面即可获得代码提示image.png记得多导出IProps，它很有用，当使用导出组件的时候，一个props上的字段类型，可以通过IProps计算得出image.png

    函数组件

    ```tsx import React from ‘react’;

export interface IInputProps { value?: string; defaultValue?: string; onChange?: (value?: string) => void; }

// 使用React.VFC声明箭头函数的类型是React的函数组件 const Input: React.VFC = (props) => { const { value, defaultValue, onChange } = props;

// 使用React.useState声明内部状态，通过泛型声明类型 const [innerValue, setInnerValue] = React.useState( defaultValue ?? ‘’, );

const isControlled = ‘value’ in props;

const displayValue = isControlled ? value : innerValue;

const handleChangeValue = (value?: string) => { if (!isControlled) { setInnerValue(value ?? ‘’); } onChange?.(value); };

const handleInputChange: React.InputHTMLAttributes< HTMLInputElement

[‘onChange’] = (event) => { handleChangeValue(event.target.value); };

return ; };

// 由于声明了类型是React.VFC，可以识别出defaultProps的类型 Input.defaultProps = { defaultValue: ‘’, };

export default Input;

  1. 在函数组件上使用ts，要点如下：
  3. 1. 必须声明函数组件的类型是`React.FC`或`React.VFC`，FC和VFC的差异仅仅在于是否有在`props`上设置`{ children?: React.ReactNode }`![image.png](https://cdn.nlark.com/yuque/0/2021/png/680068/1626945392913-c89d7f47-a644-4b72-9acc-b4ca71b74dd7.png#clientId=ufb981edd-c518-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=408&id=u14041662&margin=%5Bobject%20Object%5D&name=image.png&originHeight=408&originWidth=975&originalType=binary&ratio=1&rotation=0&showTitle=false&size=92410&status=done&style=none&taskId=uf1d3bfd6-3c33-4902-8641-66b28978f4c&title=&width=975)正是这里的`PropsWithChildren`包裹的props类型，为我们的props设置了children类型，本例子中的Input组件，由于类型是`React.VFC`，没有children类型声明，如果设置children将会报错![image.png](https://cdn.nlark.com/yuque/0/2021/png/680068/1626945550507-21d78afa-1f07-4034-bd2e-700c341b15ed.png#clientId=ufb981edd-c518-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=377&id=ue670285e&margin=%5Bobject%20Object%5D&name=image.png&originHeight=377&originWidth=1657&originalType=binary&ratio=1&rotation=0&showTitle=false&size=78263&status=done&style=none&taskId=u0c47880f-677f-416e-bc09-e1d4b4e338b&title=&width=1657)关于具体要使用FC还是VFC，主要看应用场景
  4. 1. `React.useState`可以通过泛型声明内部状态的类型，此外也可以通过类型推导![image.png](https://cdn.nlark.com/yuque/0/2021/png/680068/1626945705978-c3a5ba46-78af-475f-82c8-d51aacc43c19.png#clientId=ufb981edd-c518-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=183&id=u6277544b&margin=%5Bobject%20Object%5D&name=image.png&originHeight=183&originWidth=1030&originalType=binary&ratio=1&rotation=0&showTitle=false&size=47656&status=done&style=none&taskId=u68b1d82f-79ec-42ba-b87b-64fdaccad3f&title=&width=1030)
  5. 1. 声明为`React.FC`类型的函数组件，还可以获得`defaultProps` `displayName` 属性的类型提示![image.png](https://cdn.nlark.com/yuque/0/2021/png/680068/1626945856845-ad50f5f5-0f20-4f60-afd7-08e4f2c3e69a.png#clientId=ufb981edd-c518-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=180&id=ube3f0951&margin=%5Bobject%20Object%5D&name=image.png&originHeight=180&originWidth=691&originalType=binary&ratio=1&rotation=0&showTitle=false&size=26015&status=done&style=none&taskId=ucfd43f52-87ab-4791-82d9-50516ba4af5&title=&width=691)![image.png](https://cdn.nlark.com/yuque/0/2021/png/680068/1626945917480-39d5eb36-4864-4232-b66d-4b7fd64537af.png#clientId=ufb981edd-c518-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=239&id=udf5b5fef&margin=%5Bobject%20Object%5D&name=image.png&originHeight=239&originWidth=918&originalType=binary&ratio=1&rotation=0&showTitle=false&size=51512&status=done&style=none&taskId=ucb1c588f-cf1e-496a-98f8-9c26157ed08&title=&width=918)可以看出一个组件props上的`defaultProps`应该是`Partial`类型工具计算出来的，正如我们在类组件上使用的一样
  6. <a name="eLxjN"></a>
  7. #### 函数泛型组件
  8. 除了可以用箭头函数来声明函数组件以外，使用普通的`fucntion`也可以声明组件，但是却没有了`React.FC`的ts的类型提示，但这不是说明了`function`声明的组件完全是`React.FC`的下位替代，当需要使用到泛型组件时，就避不开需要使用`function`声明。
  9. ```tsx
  10. import React from 'react';
  12. interface IOptionProps<T> {
  13.   value: T;
  14.   children: string;
  15. }
  17. function Option<T>(props: IOptionProps<T>) {
  18.   return null;
  19. }
  21. interface IBaseOption<T> {
  22.   value: T;
  23.   label: string;
  24. }
  26. interface IBaseSelectProps<T> {
  27.   onChange?: (value?: T) => void;
  28.   value?: T;
  29.   defaultValue?: T;
  30. }
  32. interface ISelectPropsWithOptions<T> extends IBaseSelectProps<T> {
  33.   options: IBaseOption<T>[];
  34. }
  36. interface ISelectPropsWithChildren<T> extends IBaseSelectProps<T> {
  37.   children: React.ReactNode;
  38. }
  40. type ISelectProps<T> = ISelectPropsWithOptions<T> | ISelectPropsWithChildren<T>;
  42. // 使用ts函数重载声明两种允许的props类型
  43. function Select<T>(props: ISelectPropsWithOptions<T>): React.ReactElement;
  44. function Select<T>(props: ISelectPropsWithChildren<T>): React.ReactElement;
  46. function Select<T>(props: ISelectProps<T>) {
  47.   let options: IBaseOption<T>[] = [];
  48.   // 使用类型防卫来识别不同props类型
  49.   if ('children' in props) {
  50.     const list =
  51.           React.Children.map(props.children, (child) => {
  52.             // 类型防卫；return后面的语句可以保证child类型必定是 ReactElement
  53.             if (!React.isValidElement<IOptionProps<T>>(child)) {
  54.               return;
  55.             }
  57.             if (child.type === Option) {
  58.               return {
  59.                 value: child.props.value,
  60.                 label: child.props.children,
  61.               } as IBaseOption<T>;
  62.             }
  63.           }) ?? [];
  64.     if (list.length > 0) {
  65.       options = list;
  66.     }
  67.   } else if ('options' in props) {
  68.     options = props.options;
  69.   }
  71.   const [innerValue, setInnerValue] = React.useState<T | undefined>(
  72.     props.defaultValue,
  73.   );
  75.   const isControlled = 'value' in props;
  77.   const displayValue = isControlled ? props.value : innerValue;
  79.   const handleChangeValue = (value?: T) => {
  80.     if (!isControlled) {
  81.       setInnerValue(value);
  82.     }
  83.     props.onChange?.(value);
  84.   };
  86.   const handleSelectChange: React.SelectHTMLAttributes<
  87.     HTMLSelectElement
  88.   >['onChange'] = (event) => {
  89.     handleChangeValue(event.target.value as any);
  90.   };
  92.   return (
  93.     <select
  94.       // @ts-ignore
  95.       value={displayValue}
  96.       onChange={handleSelectChange}
  97.       >
  98.       {options.map((item) => (
  99.         // 此处由于有约束 select 的 value 必须是 string 或 number
  100.         // 由于使用了泛型类型而没有约束必须是 string 或 number
  101.         // 为了展示用例，此处特意忽略类型检查
  102.         // @ts-ignore
  103.         <option key={item.value} value={item.value}>
  104.           {item.label}
  105.         </option>
  106.       ))}
  107.     </select>
  108.   );
  109. }
  111. const ComplexedSelect = Object.assign(Select, { Option });
  113. export default ComplexedSelect;

image.png在组件后加上尖括号即可手动确定泛型，本处若声明为string，则设置1是number会报错image.png另一种确认泛型的方法是使用类型推导，如果预先设置options的value类型，那么T会被推导为number类型image.png
像本处的value设置成string类型，直接就识别报错了

使用函数组件的重载，可以限定传入的props类型，本用例中传入的options和children是水火不容的，如果传入其中一个再传入其他另一个就会报错
image.png使用函数重载可以保证我们想要的props是正好数量的字段，不会多也不会少

所有组件的类型

React.ComponentType<P>表示类组件和函数组件的联合定义

  1. type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;

以上类型定义拷贝自React的类型定义，这个类型在写HOC时很有用

  1. function withState<P extends WrappedComponentProps>(
  2.   WrappedComponent: React.ComponentType<P>
  3. ) {
  4.   // ... 
  5.   // 返回处理后的结点
  6. }

forwarding refs

转发组件内的ref，就是使用React.useRef来获得JSX的引用，并且进行操作

  1. import { Modal } from 'antd';
  2. import React from 'react';
  4. export interface IMyModalRef {
  5.   open: () => void;
  6.   close: () => void;
  7. }
  9. export interface IMyModalProps {}
  11. const MyModal = React.forwardRef<IMyModalRef, IMyModalProps>((props, ref) => {
  12.   const [visible, setVisible] = React.useState(false);
  14.   React.useImperativeHandle(ref, () => ({
  15.     open() {
  16.       setVisible(true);
  17.     },
  18.     close() {
  19.       setVisible(false);
  20.     },
  21.   }));
  23.   return (
  24.     <Modal
  25.       visible={visible}
  26.       title="forwarding refs"
  27.       onCancel={() => {
  28.         setVisible(false);
  29.       }}
  30.       >
  31.       <div>modal</div>
  32.     </Modal>
  33.   );
  34. });
  36. export default MyModal;

使用时，在React.useRef<T>上将刚刚导出的IMyModalRef泛型声明

  1. import { Button } from 'antd';
  2. import 'antd/dist/antd.css';
  3. import React from 'react';
  4. import MyModal, { IMyModalRef } from './components/forwarding-refs/MyModal';
  6. const App: React.VFC = () => {
  7.   const modalRef = React.useRef<IMyModalRef>(null);
  9.   return (
  10.     <div>
  11.       <MyModal ref={modalRef} />
  13.       <div>
  14.         <Button
  15.           onClick={() => {
  16.             modalRef.current?.open();
  17.           }}
  18.           >
  19.           OPEN MODAL
  20.         </Button>
  21.       </div>
  22.     </div>
  23.   );
  24. };
  26. export default App;

使用React.forwardRef少数地方有奇效，但是不是很推荐使用这个api，因为这会显得不是很符合React的哲学—“修改props/state，自动更新，数据流自上而下”，推荐用法是大部分地方遵守React哲学，少数地方可以下克上，针对特殊的地方可以使用转发ref

类组件和函数组件的差异

可以说如果要使用ts来书写react，类组件完全毫无优势可言，但是class上使用泛型会比function上简单很多，书写泛型组件的时候我更加推荐使用class组件，但是class组件却做不到重载，例如ant-design的Select组件无法区分options和children是否同时传入，即使两个props都写，ant-design的ts检查也识别不出来。

这里推荐ts在react中的实践就是，80%使用React.FC/React.VFC，FC的预置类型定义可以帮助你做简单的类型检查，10%的场景用function，泛型组件、props重载都需要function组件才能做到，10%的场景使用class组件，一些难以书写的泛型组件，还是得使用class来帮忙。

不好的实践

不要直接使用export default导出函数组件

  1. // Bad
  2. export default (props: IProps) => {
  3.   return (
  4.     <div></div>
  5.   );
  6. }
  8. // Bad
  9. export default function(props: IProps) {
  10.   return (
  11.     <div></div>
  12.   );
  13. }
  15. // Better
  16. export default function Foo(props: IProps) {
  17.   return (
  18.     <div></div>
  19.   );
  20. }

如果非要这么做，请使用命名的function进行定义

使用前两种方式导出的组件在React Inspector查看时会显示为Unknown，如果是在storybook则会显示成No Display Name