在TypeScript中,何时使用<>和何时使用:

时间:2018-12-17 15:07:25

标签: reactjs typescript

我不知道何时应使用<>和何时应使用:为属性分配类型。我下面的代码是正确的,但是我不确定为什么我声明React.FunctionComponent<Props>而不是React.FunctionComonent : Props

    interface Props {
        speakers : Speaker[]
    }

    const SpeakersMain : React.FunctionComponent<Props> = (props : Props) => (
        <div>
            <SpeakersHeader/>
            <SpeakerList speakers={props.speakers} />
        </div>
    );

1 个答案:

答案 0 :(得分:2)

const SpeakersMain: React.FunctionComponent<Props> = ...;

应使用,因为在:之后使用React.FunctionComponent的语法不正确。

SpeakersMain: React.FunctionComponent表示SpeakersMain变量是React.FunctionComponent类型。尽管<Props>React.FunctionComponent添加了说明,因为在React类型中定义为generic type<>语法允许将Props作为参数传递。

React.FunctionComponent<Props>类型意味着它是一个将Props类型作为其props参数的函数。

它的工作方式是:

type Foo<T = {}> = (props: T) => void;
type Bar = { bar: number };

var foo1: Foo = (props) => { /* props is supposed to be empty object by default */ };
var foo2: Foo<Bar> = (props) => { /* props is supposed to be Bar */ };