0

我正在阅读本教程以获取有关如何在组件中使用类型的一些线索。但到目前为止我的感觉是它是做作的和冗长的。从一个很好的简洁代码，我们得到了一些非常难以阅读的东西。最优雅的方法是什么？似乎关于这个主题的信息很少而且经常过时。使用 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
4

1 回答 1

3

StatelessComponent 接口将您的道具定义作为类型参数，因此您应该这样编写

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

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

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

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

对于大多数情况，Typescript 验证就足够了，因此您无需重复您的道具，您可以删除这些行

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的未解决问题

于 2017-03-19T10:25:48.530 回答