IntrinsicAttributes をみたら冷静になってほしい

はじめに

コンポーネントの props で型を指定することが出来ますが、VSCode でエラーを確認できました。IntrinsicAttributes ナニソレオイシイノなので防ぐ方法を記載します。

Type '{ skills: Skill[]; }' is not assignable to type 'IntrinsicAttributes & Skill[]'.
  Property 'skills' does not exist on type 'IntrinsicAttributes & Skill[]'.

ただし IntrinsicAttributes について詳しくは触れません

エラーが起きたコード

UserSKillList コンポーネントを使って Card コンポーネントはスキルの一覧を表示します。skills は Skill 型の要素を持つ配列で Card コンポーネントからはUserSKillList コンポーネントに skills プロパティとして渡しています。

当時の実装イメージは

• コンポーネントの引数 skills は Skill 型の要素を持つ配列
• プロパティ skills はコンポーネントの引数と同じ名称の必要がある

です。ただし、このイメージは間違っています。

Card.tsx

<UserSkillList skills={ user.skills } />

UserSKillList.tsx

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

export default function UserSkillList(skills: Skill[]) {
  const list = skills.map(skill =>
    <li key={skill.id}>{skill.name}</li>
  );
  return <ul>{list}</ul>;
}

コンポーネント名は XxxList とするのが通例のようですが、props までそれを守る必要があるのでしょうか？

正しいコード

プロパティはオブジェクト（ = props）になるため、情報の取得は props.プロパティ が正しいです。props を毎回書く必要はないのでさらにプロパティを分割代入して、型の追加をします。

Card.tsx

<UserSkillList skills={ user.skills } />

UserSKillList.tsx

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

export default function UserSkillList({ skills }: { skills: Skill[] }) {
  const userSkillList = skills.map(skill =>
    <li key={skill.id}>{skill.name}</li>
  );
  return <ul>{userSkillList}</ul>;
}

// または

export default function UserSkillList({ skills }: { skills: Skill[] }) {
  const userSkillList = skills.map(skill =>
    <li key={skill.id}>{skill.name}</li>
  );
  return <ul>{userSkillList}</ul>;
}

これでようやくコンポーネントが正しく動いたかと思います。

わかったこと

• 分割代入でも型定義できる
• プロパティで渡したデータを取得するには props.プロパティ になる

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼