react propTypes && Typescript

最近看官方的文档，看到了 使用 PropTypes 进行类型检查 这一章节，看完之后发现这玩意和typeScript 很类似，所以查找了一些资料，发现他们是可以互相转换的，下面来看一些例子：

基本类型的定义

PropTypes写法:

// 当然要引入（以下省略）
import PropTypes from 'prop-types';

Example.propTypes = {
  message: PropTypes.string, // 定义 string 类型
  count: PropTypes.number, // 定义 number 类型
  disabled: PropTypes.bool, // 定义 boolen 类型
  level: PropTypes.symbol, // 定义 symbol 类型
}

TypeScript 的写法:

interface Props {
  message: string;
  count: number;
  disabled: boolean;
  level: Symbol;
}

一些特殊的类型

PropTypes写法:

Example.propTypes = {
  error: PropTypes.instanceOf(Error), // 是否是 error 实例
  children: PropTypes.node, // 定义 元素
  status: PropTypes.oneOf(['inactive', 'inProgress', 'success', 'failed']), // 定义指定值，必须为 'inactive', 'inProgress', 'success', 'failed' 中的一个
  value: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Error),
  ]), // 必须为这几种类型中的一种
}

TypeScript 的写法:

interface Props {
  error: Error;
  children: React.ReactNode;
  status: 'inactive' | 'inProgress' | 'success' | 'failed';
  value: string | number | Error;
}

数组和对象

PropTypes写法:

Example.propTypes = {
  style: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number,
  }), // 指定这个对象由特定的类型值组成
  person: PropTypes.exact({
    name: PropTypes.string,
    age: PropTypes.number,
    employed: PropTypes.bool,
    status: PropTypes.oneOf([
      'single',
      'dating',
      'engaged',
      'married',
      'divorced',
      'widowed',
      'other',
    ]),
  }), // // An object with warnings on extra properties
  names: PropTypes.arrayOf(PropTypes.string), // 必须 值全是 string 类型的数组
  items: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.number,
      title: PropTypes.string,
      active: PropTypes.boolean,
    }),
  ),
}

TypeScript 的写法:

interface Props {
  style: {
    color: string
    fontSize: number
  };
  person: {
    name: string
    age: number
    employed: boolean
    status:
      | 'single'
      | 'dating'
      | 'engaged'
      | 'married'
      | 'divorced'
      | 'widowed'
      | 'other'
  };
  names: string[];
  items: {
    id: number
    title: string
    active: boolean
  }[];
}

函数
PropTypes写法:

Example.propTypes = {
  onClick: PropTypes.func,
  onChange: PropTypes.func,
  onSelect: PropTypes.func,
}

TypeScript 的写法:

interface Props {
  onClick: () => void
  onChange: (val: string) => void
  onSelect: (id: string, val: number) => void
}

必须参数的写法

PropTypes写法:

Example.propTypes = {
  description: PropTypes.string.isRequired,
  isActive: PropTypes.bool,
}

TypeScript 的写法:

interface Props {
  description: string
  isActive?: boolean
}

总结

在 TypeScript React 应用程序中使用 PropTypes 没有什么太大的价值，通过上面的例子也可以看出 TypeScript 的写法比较简单易懂

参考：

React Prop Types with TypeScript
PropTypes in a TypeScript React Application