技術メモ

プログラミングとか電子工作とか

ReactをTypeScriptで使うときに調べたこと

Reactで

コンポーネント.propTypes = {
  propNum: PropTypes.number,
};

とか書くのがとてもだるい気がしたので、TypeScriptを勉強しておりました。
そこでふと「Reactコンポーネントの継承はどうすんだ?」と思い調べて見ると良さげな記事が
https://qiita.com/kimamula/items/11873444e6a4df19df37

export default class TodoTextInput extends React.Component<Props, {value: string;}> {
  ...
}

(゚д゚)!?
React.Component<Props, {value; string;}>って何・・・
と焦るわけですが、やはり広大なインターネット上では情報を出してくれている方がいらっしゃいます。
http://chomdev.hateblo.jp/entry/20170923/1506148900

つまりC++でいうテンプレートの様なもので、継承のタイミングで型が確定する書き方だそうな。

export interface プロパティ {
}
export interface ステート {
}
export default class コンポーネント extends React.Component<プロパティ, ステート> {
}

という具合でしょうか。
確かにプロパティもステートも継承するタイミングにならないと型が決まらない筈なので「なるほど」と言ったところです。(むしろその考えがなかった時点で型に対して甘いんですが、許してください!)