インデックスシグネチャの定義
キーがあらかじめ分からないオブジェクトを記述します。
「インデックスシグネチャの定義」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
未知のキーを持つオブジェクト
プロパティ名をあらかじめ知ることができない場合があります。たとえば、スコアの辞書、キャッシュ、ルックアップテーブルなどです。TypeScriptのインデックスシグネチャを使うと、キーは任意ですが、値は同じ型を共有するオブジェクトを記述できます。
インデックスシグネチャの基本構文
インデックスシグネチャは { [key: string]: number } と記述します。これは、任意の文字列キーが数値に対応することを表します。keyという名前は単なるラベルなので、自由に変更できます。
type Scores = { [name: string]: number }
const game: Scores = { alice: 10, bob: 7 }
console.log(game.alice) // 10キーの動的な追加
すべての文字列キーが許可されるため、TypeScriptにエラーを報告されることなく、実行時にまったく新しいプロパティを割り当てられます。これがインデックスシグネチャの目的です。
type Scores = { [name: string]: number }
const game: Scores = {}
game.charlie = 5 // allowed
game["dave"] = 9 // also allowed
console.log(game.charlie + game.dave) // 14任意のキーへのアクセス
まだ設定されていないキーも含め、任意のキーを読み取れます。型システムはシグネチャを信頼するため、値の型は number になります。しかし、実行時にキーが存在しない場合は undefined になります。注意してください。
type Scores = { [name: string]: number }
const game: Scores = { alice: 10 }
const missing = game.zara // typed as number, but actually undefined
console.log(missing) // undefinedすべての値が型に適合する必要がある
オブジェクト内のすべてのプロパティは、シグネチャの値の型に一致しなければなりません。文字列値の辞書に数値を混在させることはできません。
type Labels = { [key: string]: string }
const ok: Labels = { id: "a1", role: "admin" }
// const bad: Labels = { id: "a1", count: 5 } // Error: 5 not a stringインターフェースでのインデックスシグネチャ
同じ構文を interface 内でも使用できます。これは、設定の集合やAPIから返されるレスポンスのマップを記述する場合によく使われます。
interface Dictionary {
[word: string]: string
}
const defs: Dictionary = {
cat: "a small animal",
ts: "a typed superset of JavaScript",
}
console.log(defs.ts)値の型には何でも指定できる
値側に指定できるのはプリミティブ型だけではありません。データの要件に応じて、キーを配列、オブジェクト、ユニオン型などに対応付けられます。
type Groups = { [team: string]: string[] }
const roster: Groups = {
red: ["ana", "leo"],
blue: ["sam"],
}
console.log(roster.red.length) // 2インデックスシグネチャを持つオブジェクトの反復処理
for...in ループを使うと、動的なキーを1つずつ処理できます。ループ内では、値にシグネチャに従った正しい型が付けられます。
type Scores = { [name: string]: number }
const game: Scores = { alice: 10, bob: 7 }
for (const name in game) {
console.log(name + ": " + game[name])
}<code>undefined</code> に関する安全性の差
インデックスシグネチャを使うと、キーの検索に失敗する可能性が見えにくくなります。tsconfigで noUncheckedIndexedAccess を有効にすると、すべてのアクセスに | undefined が追加され、存在しないキーを処理するよう強制されます。
// with noUncheckedIndexedAccess on:
type Scores = { [name: string]: number }
const game: Scores = { alice: 10 }
const v = game.bob // type: number | undefined
console.log(v ?? 0)読み取り専用のインデックスシグネチャ
シグネチャの前に readonly を付けると、どのキーを通じた書き込みも禁止できます。辞書は読み取り専用の構造になります。
type Frozen = { readonly [key: string]: number }
const rates: Frozen = { usd: 1, eur: 1.1 }
// rates.usd = 2 // Error: read-only
console.log(rates.eur)インデックスシグネチャが活躍する場面
キーの集合が無制限で、実行時に決まる場合はインデックスシグネチャを使います。たとえば、キャッシュ、IDをキーとするカウンター、解析済みのクエリパラメーターなどです。キーが固定されて既知の場合は、明示的なプロパティまたは Record を優先してください。
type Counter = { [event: string]: number }
const clicks: Counter = {}
function track(e: string) { clicks[e] = (clicks[e] ?? 0) + 1 }
track("open"); track("open")
console.log(clicks.open) // 2理解度チェック
インデックスシグネチャについての理解度を確認しましょう。
まとめ
{ [key: string]: T } は、任意のキーを持ち、すべての値が T 型を共有するオブジェクトを表します。キーは動的に追加でき、すべての値がシグネチャに適合する必要があります。また、存在しないキーを実行時に検索すると undefined になります。不変のマップには readonly を使用し、より安全にアクセスするには noUncheckedIndexedAccess を有効にしてください。
AI チューターと学ぶ TypeScript — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 101
- レッスン
- 352
よくある質問
「インデックスシグネチャの定義」レッスンは無料ですか？
はい。「インデックスシグネチャの定義」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「インデックスシグネチャの定義」で何を学びますか？
キーがあらかじめ分からないオブジェクトを記述します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「インデックスシグネチャの定義」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。