React 15，Typescript 2.2.1。 如何為功能/無狀態組件轉換類型？

Question

我正在閱讀本教程，以獲取有關如何在組件中使用類型的一些線索。 但是我到目前為止的感覺是，它是人為的和冗長的。 從一個簡潔的代碼中，我們可以得出一些很難閱讀的東西。 最優雅的方法是什么？ 似乎有關此主題的信息很少，而且經常過時。 很少有人將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 }) => {
  ...
}

我看到您兩次聲明道具。 一種是打字稿方式，第二次是反應方式。

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的一個公開問題