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