TypeScript Generics 入門 - 型安全なコードを書く

はじめに

TypeScript の Generics（ジェネリクス）は、型の再利用性を高め、型安全なコードを書くための強力な機能。

Generics とは

Generics を使うと、関数やクラスで扱う型を「あとから決める」ことができる。

基本的な例

typescript

// Genericsなし - any型で型安全性が失われる
function identity(arg: any): any {
  return arg;
}

// Genericsあり - 型安全性を保ちつつ柔軟
function identity<T>(arg: T): T {
  return arg;
}

// 使用例
const num = identity<number>(42); // number型
const str = identity<string>("hello"); // string型

実践的な使用例

1. 配列操作関数

typescript

function getFirst<T>(arr: T[]): T | undefined {
  return arr[0];
}

const numbers = [1, 2, 3];
const firstNum = getFirst(numbers); // number | undefined

const strings = ["a", "b", "c"];
const firstStr = getFirst(strings); // string | undefined

2. API レスポンスの型定義

typescript

interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

interface User {
  id: number;
  name: string;
}

// 使用例
const userResponse: ApiResponse<User> = {
  data: { id: 1, name: "Ryo" },
  status: 200,
  message: "Success",
};

制約（Constraints）

Generics に制約を加えることで、特定のプロパティを持つ型のみを受け入れる。

typescript

interface HasLength {
  length: number;
}

function logLength<T extends HasLength>(arg: T): number {
  console.log(arg.length);
  return arg.length;
}

logLength("hello"); // OK - stringはlengthを持つ
logLength([1, 2, 3]); // OK - 配列はlengthを持つ
logLength({ length: 5 }); // OK
// logLength(123);      // Error - numberはlengthを持たない

まとめ

Generics は型の再利用性を高める
型安全性を保ちながら柔軟なコードが書ける
制約を使うことで、より厳密な型チェックが可能