0Pricing
TypeScript Academy · レッスン

ジェネリック関数と制約（extends、デフォルトパラメーター）

ジェネリック関数を作成し、extendsで制約を追加し、使いやすいAPIのためにデフォルト型パラメーターを使います

「ジェネリック関数と制約（extends、デフォルトパラメーター）」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン1/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全3レッスンが含まれています。

導入

目標：ジェネリクスを使って、再利用可能で型安全な関数を作成します。型パラメーターを定義し、extends制約を追加し、DXを向上させるデフォルト型パラメーターを設定します。

恒等ジェネリック

型パラメーター<T>を定義します。コンパイラーが引数からTを推論するため、呼び出し側で型を注釈する必要はほとんどありません。

function identity<T>(x: T): T {
  return x;
}

const a = identity(42);    // T inferred as number
const b = identity("ts"); // T inferred as string
console.log(a, b);

extendsによる制約

extendsを使って構造（例：id）を要求します。構造的型付けにより、Tにはさらにフィールドを含めることができます。

function getId<T extends { id: number }>(item: T): number {
  return item.id;
}

getId({ id: 1, name: "Ada" }); // OK (has id)
// getId({ name: "Lin" });    // Error: missing id

keyof制約

Kをkeyof Tで制約し、Tに存在するプロパティ名だけを許可します。戻り値の型は、そのプロパティの型であるT[K]になります。

function pluck<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const user = { id: 7, name: "Neo" };
const v1 = pluck(user, "name"); // string
const v2 = pluck(user, "id");   // number
console.log(v1, v2);

デフォルト型パラメーター

デフォルト型パラメーターにより、定型的な記述を減らせます。一般的なケースでは呼び出し側が<T>を省略でき、必要な場合には上書きもできます。

interface Box<T = string> {
  value: T;
}

const aBox: Box = { value: "hi" };       // T defaults to string
const nBox: Box<number> = { value: 123 }; // explicit override
console.log(aBox.value, nBox.value);

ヒント

ヒント：

  • 推論に任せ、冗長なTの注釈は避けてください。
  • 実装でTのメンバーが必要な場合にのみ、extendsを追加してください。
  • よくあるケースを使いやすくするため、デフォルト値を指定してください。

制約の確認

クイックチェック：T extends { id: number }は何を保証しますか？

まとめ

まとめ：ジェネリック関数を定義し、extendsで制約し、APIの柔軟性と使いやすさを両立するためにデフォルト型パラメーターを設定します。

よくある質問

「ジェネリック関数と制約（extends、デフォルトパラメーター）」レッスンは無料ですか？

はい。「ジェネリック関数と制約（extends、デフォルトパラメーター）」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全3レッスンが含まれています。

「ジェネリック関数と制約（extends、デフォルトパラメーター）」で何を学びますか？

ジェネリック関数を作成し、extendsで制約を追加し、使いやすいAPIのためにデフォルト型パラメーターを使います ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/3です。

「ジェネリック関数と制約（extends、デフォルトパラメーター）」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. ジェネリック関数と制約（extends、デフォルトパラメーター）
  2. Partial、Readonly、Record、Pick、Omit
  3. keyofとインデックスアクセス型（入門）
← TypeScript Academyに戻る