インデックスアクセス型
T[K]構文でプロパティの型を参照します。
「インデックスアクセス型」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
プロパティ型を参照する
インデックスアクセス型を使うと、型の位置でブラケット構文を使用してプロパティの型を参照できます。Obj['prop']のように記述します。値を読み取る操作に似ていますが、型レベルで行われます。
基本的なインデックスアクセス
型をリテラルキーでインデックスすると、そのプロパティの型を取り出せます。User['name']はstringになります。
interface User { id: number; name: string }
type NameType = User["name"] // string
const n: NameType = "Ada"
console.log(n)型を直接記述しない理由
インデックスアクセスを使うと、型の同期を保てます。User.nameがstringから別の型に変わると、すべてのUser['name']も自動的に更新されるため、手作業で編集する必要がありません。
interface Product { price: { amount: number; currency: string } }
type Price = Product["price"] // { amount: number; currency: string }
const p: Price = { amount: 10, currency: "USD" }
console.log(p)キーの共用体でアクセスする
キーの共用体でインデックスすると、それらの値の型の共用体を取得できます。User['id' | 'name']はnumber | stringになります。
interface User { id: number; name: string }
type IdOrName = User["id" | "name"] // number | string
const v: IdOrName = 5
console.log(v)すべての値を取得するObj[keyof Obj]
keyof Objでインデックスすると、オブジェクト内のすべての値の型の共用体、つまり値の型の完全な集合を取得できます。
interface Config { host: string; port: number; secure: boolean }
type Values = Config[keyof Config] // string | number | boolean
const v: Values = true
console.log(v)[number]による配列要素型
配列型では、numberでインデックスすると要素の型を取得できます。string[][number]はstringになります。
type Names = string[]
type Item = Names[number] // string
const x: Item = "Ada"
console.log(x)タプルの要素型
タプルをnumberでインデックスすると、すべての要素型の共用体が得られます。固定長リストから値の型を導出する場合に便利です。
type Pair = [string, number]
type Element = Pair[number] // string | number
const e: Element = 42
console.log(e)typeofとの組み合わせ
typeofを使って値の型をインデックス参照します。as const配列に対する[number]と組み合わせると、配列のリテラル値のユニオン型を導出できます。
const colors = ["red", "green", "blue"] as const
type Color = typeof colors[number] // "red" | "green" | "blue"
const c: Color = "green"
console.log(c)ネストしたインデックスアクセス
ルックアップを連鎖させて、ネストした型の内部を掘り下げます。各ブラケットは構造を1階層ずつ下へたどります。
interface Data { user: { profile: { age: number } } }
type Age = Data["user"]["profile"]["age"] // number
const a: Age = 36
console.log(a)ジェネリクスでのインデックスアクセス
K extends keyof Tと組み合わせたT[K]というパターンは、型安全なゲッターの基盤です。戻り値の型は、ルックアップしたプロパティの型と正確に一致します。
function get<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key]
}
const port = get({ host: "x", port: 80 }, "port")
console.log(port) // 80, typed as number実践的な導出
インデックスアクセスを使うと、型の重複を避けられます。ドメインオブジェクトの型を改めて記述する代わりに、関数の引数の型をそこから直接導出できます。
interface Order { items: { sku: string; qty: number }[] }
type LineItem = Order["items"][number] // { sku: string; qty: number }
const li: LineItem = { sku: "A1", qty: 2 }
console.log(li)理解度チェック
インデックスアクセス型についての理解度を確認しましょう。
まとめ
インデックスアクセス型（Obj['prop']）はプロパティの型をルックアップし、元の型との同期を保ちます。キーのユニオン型でインデックスを指定すると値の型のユニオン型になり、keyof Objではすべての値の型になり、numberでは配列またはタプルの要素型になります。ネストしたルックアップにはブラケットを連鎖させ、typeofやジェネリクス（T[K]）と組み合わせて型安全な導出を行えます。
よくある質問
「インデックスアクセス型」レッスンは無料ですか？
はい。「インデックスアクセス型」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「インデックスアクセス型」で何を学びますか？
T[K]構文でプロパティの型を参照します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「インデックスアクセス型」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- typeof型演算子
- keyof型演算子
- インデックスアクセス型
- typeofとkeyofの組み合わせ