個人情報にフルネームを追加したいと思い、以下のコードを作成しました。

type Person = {
  lastName: string;
  firstName: string;
  age: number;
};

function App() {
  const profile = <T extends Person>(person: T): T=> {
    return {
      ...person,
      fullName: `${person.lastName} ${person.firstName}`
    };
  };
  
  const tanaka = profile({
    lastName: "田中",
    firstName: "一郎",
    age: 23,
  });

  return (
    <>
      <p>{tanaka.fullName} {tanaka.age}歳</p>
    </>
  );
}

export default App;

すると、tanaka.fullNameで、fullNameの型がないというコンパイルエラーが発生しました。

image2

Person型にfullNameを追加すると、

type Person = {
  lastName: string;
  firstName: string;
  fullName: string;
  age: number;
};

image3

tanaka内にfullNameがないので、コンパイルエラーが発生しました。

この場合の対処法として、Tの後に&を付けて型を追加します。

const profile = <T extends Person>(person: T): T & {fullName: string}=> {
  return {
    ...person,
    fullName: `${person.lastName} ${person.firstName}`
  };
};

エラーが解除されました。

image4

ブラウザを確認すると、

image5

意図した内容が表示されています。

ブログ一覧