0Pricing
TypeScript Academy · レッスン

ジェネリック関数:型パラメーター

関数に型パラメーターを追加して再利用性を高めます。

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

ようこそ

ジェネリクスを使うと、型安全性を保ちながら、任意の型で動作する関数を記述できます。`any`の代わりに、関数の呼び出し時に解決される型パラメーターを使用します。

ジェネリクスが解決する問題

`any`を返す関数では型情報が失われます。ジェネリクスを使うと、入力型と出力型の関係を保持できます。
// Without generics — loses type info
function first(arr: any[]): any { return arr[0]; }

// With generics — type-safe
function first<T>(arr: T[]): T { return arr[0]; }

型パラメーターの構文

パラメーターリストの前に山かっこ``を置いて、型パラメーターを宣言します。パラメーターと戻り値の型でTを使用します。
function identity<T>(value: T): T {
  return value;
}
const n = identity(42);       // T is number
const s = identity('hello');  // T is string

ジェネリック関数の型推論

TypeScriptは実際の引数から型引数を推論します。型引数を明示的に指定する必要はほとんどありません。
function wrap<T>(val: T): T[] { return [val]; }
const nums = wrap(42);    // T inferred as number -> number[]
const strs = wrap('hi');  // T inferred as string -> string[]

複数の型パラメーター

関数には複数の型パラメーターを指定できます。
function pair<A, B>(a: A, b: B): [A, B] {
  return [a, b];
}
const p = pair(1, 'hello'); // [number, string]

ジェネリックな配列関数

ジェネリクスは、任意の要素型で動作する配列ユーティリティ関数に不可欠です。
function filterNull<T>(arr: (T | null)[]): T[] {
  return arr.filter((x): x is T => x !== null);
}

型引数の明示的な指定

TypeScriptが型を推論できない場合は、型引数を明示的に指定できます。
function create<T>(): T | null { return null; }
const user = create<User>(); // T cannot be inferred — must be explicit

ジェネリクスとanyの違い

`any`とは異なり、ジェネリクスは関数全体で型同士の関係を維持します。戻り値の型は入力型に関連付けられます。
function echo<T>(val: T): T { return val; }
const n: number = echo(42);   // OK
// const s: string = echo(42); // Error — T is number

ジェネリックなアロー関数

アロー関数でも同じ構文を使用しますが、.tsxファイルではJSXタグとの曖昧さを避けるためにカンマが必要です。
const identity = <T>(val: T): T => val;
// In .tsx files:
const identity2 = <T,>(val: T): T => val;

異なる型の返却

ジェネリック関数では、型パラメーターを変換した形で使用できます。
function mapArray<T, U>(arr: T[], fn: (item: T) => U): U[] {
  return arr.map(fn);
}
const lengths = mapArray(['hello', 'world'], s => s.length);
// lengths: number[]

デフォルト値を持つジェネリックパラメーター

型パラメーターにデフォルト型を指定すると、その指定を省略できるようになります。
function createList<T = string>(): T[] { return []; }
const list = createList(); // T defaults to string

確認問題

`identity(42)`の戻り値の型は何ですか?

まとめ

ジェネリック関数は型パラメーター(T)を使用して、入力と出力の型の関係を保持します。TypeScriptは型引数を自動的に推論します。再利用可能で型安全なユーティリティを記述するには、anyではなくジェネリクスを使用します。

よくある質問

「ジェネリック関数:型パラメーター」レッスンは無料ですか?

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

「ジェネリック関数:型パラメーター」で何を学びますか?

関数に型パラメーターを追加して再利用性を高めます。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「ジェネリック関数:型パラメーター」レッスンにはどのくらい時間がかかりますか?

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

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

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

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

  1. ジェネリック関数:型パラメーター
  2. ジェネリックInterfaceと型エイリアス
  3. extendsによるジェネリック制約
  4. デフォルト型パラメーター
← TypeScript Academyに戻る