0Pricing
TypeScript Academy · レッスン

ジェネリックInterfaceと型エイリアス

Interfaceと独自の型にジェネリクスを適用します。

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

ようこそ

ジェネリクスは関数に限られません。インターフェースと型エイリアスも型パラメーターを受け取れるため、多くの型で再利用できます。

ジェネリックインターフェースの構文

インターフェース名の後に``を追加して、ジェネリックにします。プロパティの型とメソッドシグネチャでTを使用します。
interface Box<T> {
  value: T;
  unwrap(): T;
}
const box: Box<number> = { value: 42, unwrap() { return this.value; } };

ジェネリック型エイリアス

型エイリアスでも同じ``構文を使用します。
type Maybe<T> = T | null | undefined;
type Pair<A, B> = { first: A; second: B };
const p: Pair<string, number> = { first: 'Alice', second: 30 };

ジェネリックなリポジトリインターフェース

代表的な使用例は、任意のエンティティ型で動作するジェネリックなリポジトリインターフェースです。
interface Repository<T> {
  findById(id: number): T | null;
  findAll(): T[];
  save(item: T): void;
  delete(id: number): void;
}

ジェネリックインターフェースの実装

ジェネリックインターフェースを実装するときに、型引数を指定します。
class UserRepo implements Repository<User> {
  findById(id: number): User | null { return null; }
  findAll(): User[] { return []; }
  save(user: User): void {}
  delete(id: number): void {}
}

ジェネリックインターフェースの拡張

ジェネリックインターフェースは、他のジェネリックインターフェースを拡張できます。
interface Named<T> { name: T; }
interface NamedAndAged<T> extends Named<T> { age: number; }

ジェネリックなレスポンス型

任意のデータペイロードをラップする、ジェネリックなAPIレスポンス型です。
type ApiResponse<T> = {
  status: 'success' | 'error';
  data: T;
  timestamp: number;
};
const res: ApiResponse<User[]> = { status: 'success', data: [], timestamp: Date.now() };

インターフェースでの複数の型パラメーター

インターフェースでは複数の型パラメーターを使用できます。
interface KeyValue<K, V> {
  key: K;
  value: V;
}
const kv: KeyValue<string, number> = { key: 'age', value: 30 };

非ジェネリックインターフェースのジェネリックメソッド

インターフェース全体をジェネリックにしなくても、ジェネリックメソッドを定義できます。
interface Transformer {
  transform<T, U>(input: T, fn: (val: T) => U): U;
}

再帰的なジェネリック型

ジェネリック型は、自身を参照してツリー構造や連結リスト構造を表現できます。
interface TreeNode<T> {
  value: T;
  children: TreeNode<T>[];
}

ジェネリクスにおける型エイリアスとインターフェースの違い

どちらもジェネリクスを同じように適切にサポートします。クラスが実装する契約にはinterfaceを、Maybeのようにユニオンを含むジェネリクスにはtypeを優先します。

確認問題

`interface Repository`を実装するとき、何を指定しますか?

まとめ

ジェネリックインターフェースと型エイリアスは、を使用して任意の型で動作します。これにより、リポジトリ、レスポンスラッパー、再帰的なデータ構造向けの再利用可能な契約を定義できます。実装時には具体的な型引数を指定します。

よくある質問

「ジェネリックInterfaceと型エイリアス」レッスンは無料ですか?

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

「ジェネリックInterfaceと型エイリアス」で何を学びますか?

Interfaceと独自の型にジェネリクスを適用します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「ジェネリックInterfaceと型エイリアス」レッスンにはどのくらい時間がかかりますか?

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

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

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

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

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