反应 15，打字稿 2.2.1。如何为功能/无状态组件转换类型？

Question

我正在阅读this tutorial 以获取有关如何在我的组件中使用类型的一些线索。但到目前为止我的感觉是它是做作的和冗长的。从一个很好的简洁代码，我们得到了一些非常难以阅读的东西。最优雅的方法是什么？似乎关于这个主题的信息很少而且经常过时。使用 TS 和 React 的人并不多。

React.StatelessComponent<React.HTMLProps<JSX.Element>> 比 React.StatelessComponent<{}> 好吗？

一切都始于这个错误[ts] Property 'propTypes' does not exist on type '({match, onClick, completed, text}: EntityPage) => Element'.

我目前的设置：

import * as React from "react";
import { PropTypes } from "react";
import * as classNames from 'classnames';

interface EntityPage {
    match: any,
    onClick(): void,
    completed: boolean,
    text: string
}

export const EntityPageCmp: React.StatelessComponent<{}> = 
    ({ match, onClick, completed, text }: EntityPage) => {

    // Styles
    require('./entity-page.cmp.scss');
    let classes = classNames('entity-page-cmp'),
        titleClasses = classNames('title', { active: completed });

    return (
        <div className={classes} >
            <h3 className={titleClasses}>
                Entity: {match.params.entityId}
            </h3>
            {text}
        </div>
    )
}

EntityPageCmp.propTypes = {
    onClick: PropTypes.func.isRequired,
    completed: PropTypes.bool.isRequired,
    text: PropTypes.string.isRequired
}

export default EntityPageCmp

Answer 1

StatelessComponent 接口将你的 prop 定义作为类型参数，所以你应该这样写

export const EntityPageCmp: React.StatelessComponent<EntitPage> = 
    ({ match, onClick, completed, text }) => {
  ...
}

我看到你声明了两次 props。一次是打字稿方式，第二次是反应方式。

Typescript 在编译期间为您提供类型安全，并确保这一行就足够了：React.StatelessComponent<EntitPage>

与 Typescript props 相反，React props 在运行时为您提供验证，当 react 检测到错误的属性类型时，控制台上会出现错误。如果你想拥有它，你需要编写 React 道具。

在大多数情况下，Typescript 验证就足够了，所以你不需要重复你的 props，你可以删除这些行

EntityPageCmp.propTypes = {
    onClick: PropTypes.func.isRequired,
    completed: PropTypes.bool.isRequired,
    text: PropTypes.string.isRequired
}

如果你真的想同时拥有这两者，你可以使用像https://github.com/gcanti/prop-types-ts 这样的库来获得它而无需样板。不幸的是，打字稿本身并不支持它。这是https://github.com/Microsoft/TypeScript/issues/4833的一个未解决问题@