2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

はじめに

この記事では、TypeScript の Generics の概要について記載します。Generics を利用することで、型の安全性とコードの共通化を両立できます。

開発環境

開発環境は以下の通りです。

  • Windows11
  • VSCode
  • TypeScript 5.5.3

型の安全性とコードの共通化とは

以下の例では、関数の引数と戻り値の型を number と定義することで、型の安全性を担保できます。ただ、同じロジックで引数と戻り値の型を string にする必要がある場合、ロジックは同じで型だけが異なる関数を別途定義しなければなりません。

index.ts
function identity(arg: number): number {
  return arg;
}

一方、以下の例では、引数と戻り値の型を any にしているので、numberstring どちらの型も利用できます(型ごとに関数を定義する必要はありません)。ただ、コンパイラのチェックが行われなくなり、バグを生みやすくなります(型の安全性が損なわれます)。

index.ts
function identity(arg: any): any {
  return arg;
}

したがって、型の安全性を高めるとコードの共通化が難しくなり、コードを共通化すると型の安全性が損なわれます。

型を変数のように扱うことで、型の安全性とコードの共通化を両立

Generics では、型を変数のように扱うことで、型の安全性とコードの共通化を両立します。
以下の例では、関数名の直後に <T>、変数と戻り値の型を T とした関数を定義しています。T が変数にあたります。

index.ts
export function identity<T>(arg: T): T {
  return arg;
}

そして、上記の関数を利用する際、<T> のところで型を指定します。

index.ts
identity<number>(1);
identity<string>("test");

関数の利用時に型を指定しているので、型に合致しない値を引数に渡すと、エラーになります。

image.png

extends を使うことで、Generics の型 T を特定の型に限定できます。

以下の例では、Tstringnumber に限定しています。
限定した型に合致しない型を指定すると、エラーになります。

index.ts
export function identity<T extends string | number>(arg: T): T {
  return arg;
}

identity<boolean>(true);

image.png

このように Generics で型を変数のように扱うことで、型の安全性とコードの共通化を両立できます。

参考

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?