Propsの型定義について学ぶ

コンポーネントがどんなPropsを受け取っているのかが事前にわかると、コードのタイプミスなどに気づくことができたり、型定義をすることで他の人がコードを読むときスムーズになります。

子コンポーネント側の型定義の仕方の一例です。

type User = {
  id: number;
  name: string;
};

export const UserList = (props: User) => {
  const { id, name } = props;

  return (
    <p>{id}: {name}</p>
  );
};

上記のように型定義をすることで、型定義した値が抜けていたり、propsで渡す名前が間違えているといった場合はコンパイル・ビルド時にエラーを返せるようになります。

大規模なシステムほどTypeScriptを導入した方が良いと言われるのは、やはり変更（リファクタリング）に強いためです。