オブジェクトや配列から値を取り出す際に利用するインデックスアクセスという方法があります。
これはTypeScriptで型の一部にアクセスするための機能です。
インデックスアクセスは、JavaScriptでも利用できる記述ですが、下記のような記述を見かけて「ん？」となりました。
type Array = Array[number];
初学者が「ん？」とならないためにメモとして残します！
〇〇[number]は数値インデックスアクセスをやっている
わかってしまえばなんてことありませんが、下記の状態と同じことを行なっています！
type Array = Array[0];
type Array = Array[1];
〇〇[number]は、
- APIの返り値が変更された場合でも自動で更新される
- 型を手動で複製する必要がない
- 正確な型情報を維持できる
などのメリットがありますので覚えておけると良いと思います！
少しわかりにくかったと思うので具体的な例を見ておきます！
type ApiResponse = {
products: {
id: number;
name: string;
price: number;
}[];
}
type Product = ApiResponse['products'][number];
// Productの型
type Product = {
id: number;
name: string;
price: number;
}
API側で上記にage: numberが追加されたとします。
type ApiResponse = {
products: {
id: number;
name: string;
price: number;
+ age: number;
}[];
}
type Product = ApiResponse['products'][number];
// Productの型
type Product = {
id: number;
name: string;
price: number;
+ age: number;
}
新しく追加された分も同じ記述で対応することが可能です！
【おまけ】インテックスアクセスを利用した型の取得方法
本題からはそれますが、インデックスアクセスを利用すると様々な方法で型を取得できますので紹介しておきます！
オブジェクトや配列で定義された型を取得する方法は割愛し、それ以外のインデックスアクセスについて紹介します！
複数のキーを使用する例
type Product2 = {
id: number;
name: string;
price: number;
}
type Product2Info = Product2['id' | 'price']
const info: Product2Info = 1111 // OK
const info2: Product2Info = '1111'; // エラー
Product2のidとpriceをインデックスアクセスで型を取得します。
idとpriceの方はどちらもnumber型なのでProduct2Infoはnumber型を許容する型になります。
なので文字列を入れようとするとエラーとなります。
keyof演算子と組み合わせる例
type Product3 = {
id: number;
name: string;
price: number;
}
type ProductKeys = keyof Product3;
type ProductValues = Product3[keyof Product3];
keyofを利用することによってキーを取得して型とすることもできますし、組み合わせるとキーに対応した型を取得することも可能です！
上記の例だとProductKeysの方は、id、name、priceという文字列を許容する型になります。
ProductValuesはkeyに対応するvalueを取得するので、nuber、stringを許容する型になります。
【まとめ】TypeScriptのインデックスアクセス
型のインデックスアクセスを使用することで、既存の型から新しい型を作成したり、特定のプロパティの型を抽出したりできます。
大きな型から一部の情報だけを使用したい場合や、型の再利用性を高めたい場合に非常に便利です！
初学者が使おうとすると混乱する場合もあるので少しずつ利用して慣れていけると良いと思います！