そもそもClassComponentなんて使うなよ

というツッコミは無しで。

 

React.Componentのジェネリクスにpropsの型を指定しても、

defaultPropsに型はつかない。

 

さらに追加でいうと、

デフォルト値があるプロパティはオプショナルにしたいところだが、

それだとpropsの参照にundefinedが混ざる。

デフォルト値で補完されるはずなので、それはうまくない。

 

こんな問題に遭遇したくなければ、

[1] propsはすべてオプショナルに

[2] defaultPropsは設定しない

の2点に気を使えば、とても綺麗である。

 

---

interface Props {

id?: number;

name?: string;

}

 

class Hoge extends React.Component<Props, State> {

---

 

でも現実はそううまくいかない。

 

props.idは必須にしたい！とか

props.nameのデフォルトは’太郎’がいい！

という状況もきっとあるだろう。

ここで最初の話である。

 

この場合、

(1) Props型は必須とオプショナルの二つが混ざる

(2) defaultPropsの型を別途定義しなければならない

(3) propsの参照時は Required<Props>になるはず

を満たせば良さそう。

 

---

const defaultProps = {

name: ‘太郎’

};

 

type DefaultProps = typeof defaultProps;

 

interface Props extends Partial<DefaultProps> {

id: number;

}

 

class Hoge extends React.Component<Props, State> {

public static defaultProps = defaultProps;

 

render() {

const { id, name } = this.props as Props & DefaultProps;

---

 

ちょっとめんどいけど、こんな感じだといい感じだ。

 

propsの参照のたびにキャストするのも面倒なので、

Getterを用意しておくと楽かも。(ただしちょいきもちわるい

 

---

private get cProp() {

return this.props as Props & DefaultProps;

}

 

render() {

const { id, name } = this.cProps;

---