Props

やっと「りあクト！」本文に戻ってきました。。

Props

サンプルコード（CharacterList.tsx）

interface CharacterListProps {
  school: string;
  characters: Character[];
}

class CharacterList extends Component<CharacterListProps> {
  render(){
    const { school, characters } = this.props;

    return (
// 省略

CharacterListProps という型インターフェースを定義して、 CharacterList というコンポーネントを定義するクラス宣言のところで、型変数として呼び出している。 こうすることで、コンポーネントの Props の型を指定できる。 Component クラスの型引数にはデフォルトで空オブジェクト {} が設定されているので、Props が必要ないときは省略できる。

コンポーネントでは、タグ属性として渡された Props の値を、クラスのメンバー変数 props として扱うことができる。

インターフェースを定義するときに、要素名に ? をつけておくと、オプショナル定義となるので マウントするときに属性値を書いても書かなくてもどっちでもよくなる。

interface CharacterListProps {
  school?: string;
  characters: Character[];
}

省略された場合の処理を考えておく必要はある。