extendsコンポーネントの後に<{}>という構文がありますか？

Question

私が使用して、今日新しいプロジェクトを開始したが0.51.0ネイティブ反応し、デフォルトのプロジェクトファイルのクラスの構文はextends Component後に何か新しいものを追加、<{}>構文を持っていたことに気づい：

export default class App extends Component<{}> { 
    ... 
} 

私は研究が、ほとんどの検索をやってみましたエンジンは正確な文字列マッチングでも特殊文字を無視するので、この構文が何であるかを調べることは困難であることが判明しました。私はいくつかのテストを行い、この変更がv0.49.0に現れたことを知ることができました。 release notesは、この追加された構文が何をしているかについては言及していません。

曖昧なキーワードの検索と読み込みは、これがTypeScriptに関連する構文である可能性があると考えていますが、言語には慣れていないので、構文の詳細な検索方法についてはわかりません適切な用語が何であるかを知らなくても。構文の名前とその意味は誰にでも分かりますか？具体的には、ネイティブ・リアクションに関する。

Answer 1

これは、コンポーネントで受け取る小道具のタイプにつきましては、Flowと関連しています。 Component<{}>は、コンポーネントが小道具を受け取ることを期待していないことを意味します。

フローとReact.Componentを使用すると、小道具と州のタイプを定義できます（詳細はReact$Componentタイプ宣言を参照）。フローdocumentationから

例は、約成分

import * as React from 'react'; 

type Props = { /* ... */ }; 

type State = { 
    count: number, 
}; 

class MyComponent extends React.Component<Props, State> { 
    state = { 
    count: 0, 
    }; 

    componentDidMount() { 
    setInterval(() => { 
     this.setState(prevState => ({ 
     count: prevState.count + 1, 
     })); 
    }, 1000); 
    } 

    render() { 
    return <div>Count: {this.state.count}</div>; 
    } 
} 

<MyComponent />; 

を反応させます