react propTypes && Typescript react.js

最近看官方的文档，看到了使用 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 }

总结
【react propTypes && Typescript】在 TypeScript React 应用程序中使用 PropTypes 没有什么太大的价值，通过上面的例子也可以看出 TypeScript 的写法比较简单易懂
参考：
React Prop Types with TypeScript
PropTypes in a TypeScript React Application