ジェネリック配列
CoddyのJavaScriptジャーニー「Introduction To TypeScript」セクションの一部 — レッスン 60/73。
TypeScriptにおいて、配列とジェネリクスは非常に相性よく機能します。以前に型定義された配列について学んだ際、配列が特定の型の要素のみを保持できることを指定するために T[] 構文を使用しました。ジェネリクスを使用すると、これと同じ概念を表現する別の方法が提供されます。
TypeScriptは、Array<T>形式を使用した、型指定された配列のための代替構文を提供しています。
// These two declarations are equivalent:
let numbers1: number[] = [1, 2, 3];
let numbers2: Array<number> = [1, 2, 3];Array<T>構文は、配列を操作するジェネリック関数を扱う際に特に便利です。これにより、コードのジェネリックな性質がより明示的で読みやすくなります。特に、型安全性を維持しながらあらゆる型の配列を扱える関数を作成する場合に有効です。
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
チャレンジ
簡単任意の型の配列を受け取り、その最初の要素を返すか、配列が空の場合は undefined を返す、getFirstElement という名前のジェネリック関数を作成してください。
この関数は以下の条件を満たす必要があります：
- ジェネリック型パラメータ
Tを使用すること Array<T>型のarrという名前のパラメータを1つ受け取ることT型の最初の要素、またはundefinedを返すことT | undefinedという明示的な戻り値の型アノテーションを持つこと
Array<T> 構文を使用して、以下の配列を作成してください：
["apple", "banana", "cherry"]を含むArray<string>型のstringArray[10, 20, 30, 40]を含むArray<number>型のnumberArray[true, false, true]を含むArray<boolean>型のbooleanArray- 空の
Array<string>型のemptyStringArray
関数をテストし、以下の出力を表示してください：
stringArrayを引数にしてgetFirstElementを呼び出した結果を表示するnumberArrayを引数にしてgetFirstElementを呼び出した結果を表示するbooleanArrayを引数にしてgetFirstElementを呼び出した結果を表示するemptyStringArrayを引数にしてgetFirstElementを呼び出した結果を表示する["single"]を含む新しいArray<string>を引数にしてgetFirstElementを呼び出した結果を表示する
チートシート
TypeScriptは、型指定された配列に対して2つの同等な構文を提供します。
// これらの2つの宣言は同等です:
let numbers1: number[] = [1, 2, 3];
let numbers2: Array<number> = [1, 2, 3];Array<T>構文は、配列を操作するジェネリック関数を扱う際に特に便利であり、型安全性を維持しながら、コードのジェネリックな性質をより明示的で読みやすくします。
自分で試してみよう
// TODO: ここにコードを記述してください
// ジェネリック関数 getFirstElement を作成します
// Array<T> 構文を使用して必要な配列を作成します
// 関数をテストして結果を出力しますこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
Introduction To TypeScriptのすべてのレッスン
2基本の型
基本の型: str, num, boolean'any' 型: 脱出ハッチ'unknown' 型'null' と 'undef' の扱い型推論の実践明示的な型アノテーションまとめ：基本の型の演習5型：エイリアス、ユニオン型、インターセクション型
プリミティブ型の型エイリアスユニオン型 ('|')ユニオン型の扱い方リテラル型インターセクション型 ('&')型エイリアスの組み合わせまとめ：高度な型の組み合わせ