javascript - react 15， typescript 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 接口(interface)将您的 prop 定义作为类型参数，因此您应该这样编写

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

我看到你声明了 props 两次。第一次以 typescript 方式，第二次以 react 方式。

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

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

对于大多数情况，Typescript 验证就足够了，因此您不需要重复您的 props，并且可以删除这些行

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

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