TypeScript React应用程序中的PropTypes

Question

React.PropTypes在TypeScript React应用程序中使用是否有意义还是仅仅是"腰带和吊带"的情况？

由于组件类是使用Props类型参数声明的:

interface Props {
    // ...
}
export class MyComponent extends React.Component<Props, any> { ... }

添加是否有任何实际好处

static propTypes {
    myProp: React.PropTypes.string
}

到班级定义？

Answer 1

如果要编写要由非TypeScript项目(例如组件库)使用的组件,那么这些项目将无法从基于PropTypes的类型验证中受益.

但是,如果您没有制作任何非TypeScript项目将要使用的内容,那么这是一个毫无意义的练习.现在尤其如此,TypeScript 2.4将支持JSX子类型检查(https://github.com/Microsoft/TypeScript/issues/13618).

千万记住,虽然React.PropTypes作为一个提供React.PropTypes,PropTypes.InferProps仍然是必要的,以便有传递到你的组件这些值.

我很想知道是否有一个工具可以React.PropTypes在编译时从TypeScript接口自动生成.那实在是太酷了.

Answer 2

Typescript和PropTypes具有不同的用途。Typescript在编译时验证类型，而PropTypes在运行时检查。

Typescript在编写代码时很有用：如果将错误类型的参数传递给React组件，为函数调用提供自动完成功能等，它将警告您。

当您测试组件如何与外部数据交互时，例如从API加载JSON时，PropTypes很有用。PropTypes将通过打印如下有用的消息来帮助您调试（在React的开发模式下）组件失败的原因：

Warning: Failed prop type: Invalid prop `id` of type `number` supplied to `Table`, expected `string`

即使看起来Typescript和PropTypes做相同的事情，它们实际上根本没有重叠。但是可以从Typescript自动生成PropType，这样您就不必两次指定类型，例如：

• https://github.com/milesj/babel-plugin-typescript-to-proptypes
• https://github.com/grncdr/ts-react-loader#what-it-does
• https://github.com/gcanti/prop-types-ts

Answer 3

正如@afonsoduarte 所说。

我只想补充一点，您还可以像这样从 PropTypes 生成 Typescript 类型：

const propTypes = {
  input: PropTypes.shape({
    id: PropTypes.number.isRequired,
    name: PropTypes.string.isRequired,
  }),
};

type MyComponentProps = PropTypes.InferProps<typeof propTypes>;

const MyComponent: FunctionComponent<MyComponentProps > = (props) => {
  // ...
}

MyComponent.propTypes = propTypes;

Answer 4

我想在编译时无法推断道具类型的一些混乱情况下，查看propTypes在运行时使用生成的任何警告会很有用。

一种这样的情况是在处理来自类型定义不可用的外部源的数据时，例如您无法控制的外部 API。对于内部 API，我认为编写（或更好地生成）类型定义是值得的，如果它们尚不可用的话。

除此之外，我真的没有看到任何好处（这就是为什么我从来没有亲自使用过它）。

Answer 5

@types/prop-types中的“ InferPropTypes ”可用于根据 PropTypes 定义创建类型定义。检查下面的例子

import React from "react";
import PropTypes, { InferProps } from "prop-types";

const ComponentPropTypes = {
    title: PropTypes.string.isRequired,
    createdAt: PropTypes.instanceOf(Date),
    authorName: PropTypes.string.isRequired,
};

type ComponentTypes = InferProps<typeof ComponentPropTypes>;
const MyComponent = ({ authorName, createdAt, title }: ComponentTypes) => {
    return <span>Blog Card</span>;
};

MyComponent.propTypes = ComponentPropTypes;
export default MyComponent;