ジェネリックインターフェース
CoddyのJavaScriptジャーニー「Introduction To TypeScript」セクションの一部。レッスン 61/73。
generic 関数を作成できるのと同様に、generic インターフェースも作成できます。これにより、特定のプロパティの型を柔軟かつ再利用可能に保ちながら、オブジェクトの構造を定義できます。
同じ型パラメーター構文を using して generic interface を作成する方法は次のとおりです。
interface Container {
value: T;
isEmpty: boolean;
}インターフェース名の後にある <T> は、インターフェース定義全体で使用できる型パラメーターを作成します。この例では、value プロパティはインターフェースを使用するときに指定した型になり、isEmpty は固定の boolean 型のままです。
ジェネリック interface を使用する場合は、山括弧内に具体的な型を指定します。
const stringContainer: Container = {
value: "hello",
isEmpty: false
};
const numberContainer: Container = {
value: 42,
isEmpty: false
};
チャレンジ
簡単任意の型のデータと成功情報を保持できる、generic インターフェース Result を作成してください。
インターフェースには、次の2つのプロパティを持たせてください。
- 型が
booleanのsuccess - 型が
T（generic 型パラメーター）のdata
generic インターフェースを使用して、次のオブジェクトを作成してください。
- 型が
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 という名前の generic 関数を作成してください。
- generic 型パラメーター
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型：エイリアス、ユニオン型、インターセクション型
プリミティブ型の型エイリアスユニオン型 ('|')ユニオン型の扱い方リテラル型インターセクション型 ('&')型エイリアスの組み合わせまとめ：高度な型の組み合わせ自分で練習してみよう: JavaScriptオンラインコンパイラ