🧩 TypeScriptの型引数を理解する

今回は型引数について学習していきましょう！型引数は、型を定義する時にパラメータを持たせることができます。

型引数を持つ型

type User<S, N> = {
  name: S;
  age: N;
  favorite: S;
};

const user: User<string, number> = {
  name: "taro",
  age: 12,
  favorite: "movie",
};

型を定義する時にS, N という名称で型引数を定義した。プロパティのname, favoriteはSという同じ型 ageはNという型になるという定義をしている。

user定数を宣言する際に、型引数で、それぞれstring, number型を指定することで、それぞれ型定義に沿った定数を宣言することができた。

型引数を指定する場合は、変数、定数を宣言をする際に<>で型引数をパラメータとして指定する必要がある。

部分型の型引数 extends

extends を使用して型引数と一致すべき型を指定することができる。

type Group<T extends Member> = {
  name: string
  leader: T
};

type Member = {
  name: string
  age: number
};

const group: Group<Member> = {
  name: "g1",
  leader: {
    name: "taro",
    age: 12
  }
};

この例では、型引数としてMember型を渡す必要がある。

オプショナルな型引数

型引数にデフォルトを指定することで、省略可能な型引数にすることができる。

type Group<T = Member> = {
  name: string;
  leader: T;
};

type Member = {
  name: string
  age: number
};

const group: Group = {
  name: "g1",
  leader: {
    name: "taro",
    age: 12
  },
};

<T = Member>　のようにデフォルトを宣言してあげることで省略可能になり、groupを宣言する際に型引数を記載する必要がない。