ジェネリックインターフェース
CoddyのJavaScriptジャーニー「Introduction To TypeScript」セクションの一部。レッスン 61/73。
ジェネリック関数を作成できるのと同様に、ジェネリックインターフェースも作成できます。これにより、特定のプロパティの型を柔軟かつ再利用可能に保ちながら、オブジェクトの形状を定義できます。
同じ型パラメーター構文を使用してジェネリックインターフェースを作成する方法は次のとおりです：
interface Container<T> {
value: T;
isEmpty: boolean;
}インターフェース名の後にある <T> は、インターフェース定義全体で使用できる型パラメーターを作成します。この例では、value プロパティはインターフェースを使用するときに指定した型になり、isEmpty は固定の boolean 型のままです。
ジェネリックインターフェースを使用する場合は、山括弧内に具体的な型を指定します。
const stringContainer: Container<string> = {
value: "hello",
isEmpty: false
};
const numberContainer: Container<number> = {
value: 42,
isEmpty: false
};
チャレンジ
簡単成功情報とともに任意の型のデータを保持できる、Result という名前のジェネリックインターフェースを作成してください。
インターフェースには次の2つのプロパティを定義してください。
- 型が
booleanのsuccess - 型パラメーター（ジェネリック型）が
Tのdata
ジェネリックインターフェースを使用して、次のオブジェクトを作成してください。
- 型が
Result<string>で、success: trueおよびdata: "Operation completed"を持つstringResult - 型が
Result<number>で、success: trueおよびdata: 42を持つnumberResult - 型が
Result<boolean>で、success: falseおよびdata: falseを持つbooleanResult - 型が
Result<string[]>で、success: trueおよびdata: ["item1", "item2", "item3"]を持つarrayResult
次の処理を行う、processResult という名前のジェネリック関数を作成してください。
- ジェネリック型パラメーター
Tを使用する - 型が
Result<T>のresultというパラメーターを1つ受け取る - 文字列メッセージを返す
successがtrueの場合、"Success: [data]"を返すsuccessがfalseの場合、"Failed: [data]"を返す
次の出力を表示してください。
stringResultを引数としてprocessResultを呼び出した結果を表示するnumberResultを引数としてprocessResultを呼び出した結果を表示するbooleanResultを引数としてprocessResultを呼び出した結果を表示するarrayResultを引数としてprocessResultを呼び出した結果を表示するstringResult.dataを表示する
自分で試してみよう
// TODO: ここにコードを書いてください
// ジェネリックな Result インターフェースを作成する
// Result インターフェースを使用してオブジェクトを作成する
// ジェネリックな processResult 関数を作成する
// 必要な出力を表示する
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
Introduction To TypeScriptのすべてのレッスン
2基本の型
基本の型: str, num, boolean'any' 型: 脱出ハッチ'unknown' 型'null' と 'undef' の扱い型推論の実践明示的な型アノテーションまとめ：基本の型の演習5型：エイリアス、ユニオン型、インターセクション型
プリミティブ型の型エイリアスユニオン型 ('|')ユニオン型の扱い方リテラル型インターセクション型 ('&')型エイリアスの組み合わせまとめ：高度な型の組み合わせ自分で練習してみよう: TypeScriptプレイグラウンド