Javascript 反应15，键入脚本2.2.1。如何为功能性/无状态组件强制转换类型？

我在阅读一些关于如何在我的组件中使用类型的线索。但我到目前为止的感觉是，这是做作和冗长的。从一个简洁的代码中，我们得到了一些真正难以阅读的东西。最优雅的方式是什么？关于这一问题的资料似乎很少，而且常常过时。没有那么多人使用TS进行反应

React.StatelessComponent

是否优于

React.StatelessComponent

这一切都是从这个错误开始的。

[ts]属性“propTypes”在类型“（{match，onClick，completed，text}:EntityPage）=>元素”上不存在。

我当前的设置：

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

import*as React from“React”；
从“react”导入{PropTypes}；
从“类名称”导入*作为类名称；
接口实体页{
匹配：任何，
onClick（）：void，
已完成：布尔，
文本：字符串
}
导出常量EntityPageCmp:React.StatelessComponent=
（{match，onClick，completed，text}:EntityPage）=>{
//风格
要求（“./entity page.cmp.scss”）；
让classes=classNames（'entity-page-cmp'），
titleClasses=classNames（'title'，{active:completed}）；
返回(
实体：{match.params.entityId}
{text}
)
}
EntityPageCmp.propTypes={
onClick:PropTypes.func.isRequired，
已完成：PropTypes.bool.isRequired，
text:PropTypes.string.isRequired
}
导出默认EntityPageCmp

无状态组件接口将您的prop定义作为类型参数，所以您应该这样编写它

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

---

如果你真的想两者兼而有之，你可以使用一些库，比如不用样板文件就能得到它们。不幸的是，typescript本机不支持它。这里有一个悬而未决的问题

无状态组件接口将您的prop定义作为类型参数，所以您应该这样编写它

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

---

如果你真的想两者兼而有之，你可以使用一些库，比如不用样板文件就能得到它们。不幸的是，typescript本机不支持它。这是一个开放的问题

感谢您扩展主题。我同意，在大多数地方，使用编译时类型检查就足够了。我对来自Angular 2的反应是新的。我可以说，在某些情况下，运行时检查是非常必要的，甚至是至关重要的。服务中使用的许多帮助器方法往往受益于运行时检查。我通常检查参数，以防止它们被误用，从而防止调用堆栈中更深层次的bug。你提到的图书馆可能很方便。我希望它能吸引更多的人。谢谢你扩展话题。我同意，在大多数地方，使用编译时类型检查就足够了。我对来自Angular 2的反应是新的。我可以说，在某些情况下，运行时检查是非常必要的，甚至是至关重要的。服务中使用的许多帮助器方法往往受益于运行时检查。我通常检查参数，以防止它们被误用，从而防止调用堆栈中更深层次的bug。你提到的图书馆可能很方便。我希望它将获得牵引力。