既知のキーと動的なキーの組み合わせ
固定プロパティとインデックスシグネチャを安全に組み合わせます。
「既知のキーと動的なキーの組み合わせ」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
固定部分と柔軟な部分
オブジェクトに、必ず存在するいくつかのプロパティと、無制限に追加できる値が含まれることはよくあります。TypeScriptでは、同じ型の中に名前付きプロパティとインデックスシグネチャを宣言できます。ただし、重要な制約が1つあります。
シグネチャと共存する既知のキー
ここでは length が常に存在し、それ以外の文字列キーは数値に対応します。名前付きプロパティとインデックスシグネチャは共存できます。
interface NumberMap {
length: number
[key: string]: number
}
const m: NumberMap = { length: 2, a: 1, b: 1 }
console.log(m.length, m.a)互換性の制約
注意点は、すべての固定プロパティの型が、インデックスシグネチャの値の型に代入可能でなければならないことです。インデックスシグネチャはすべてのキーについての約束なので、名前付きキーもそれに従う必要があります。
interface Valid {
id: number // ok: number matches the signature
[key: string]: number
}
const v: Valid = { id: 1, score: 99 }
console.log(v.id + v.score)制約に違反した場合
固定プロパティの型がインデックスの値の型と一致しない場合、TypeScriptはその型を拒否します。文字列名のプロパティを、数値を値とする辞書に含めることはできません。
// interface Broken {
// name: string // Error: string not assignable to number
// [key: string]: number
// }インデックスの値の型を広げる
固定プロパティに異なる型を許可するには、それらすべてを含むユニオン型にインデックスシグネチャを広げます。これで、文字列の名前と数値のスコアの両方を扱えます。
interface Record {
name: string
[key: string]: string | number
}
const r: Record = { name: "ana", score: 10 }
console.log(r.name, r.score)オプションの固定プロパティ
固定プロパティには ? を付けてオプションにできます。存在する場合は、インデックスシグネチャとの互換性が必要です。
interface Config {
id: string
label?: string
[key: string]: string | undefined
}
const c: Config = { id: "x" }
console.log(c.label) // undefinedオプションプロパティに undefined が必要な理由
オプションプロパティは存在しない可能性があるため、その実効型には undefined が含まれます。したがって、インデックスシグネチャでも undefined を許可しなければ、TypeScriptはオプションメンバーについてエラーを報告します。
interface Safe {
title?: string
[key: string]: string | undefined
}
const s: Safe = {}
for (const k in s) console.log(s[k])ユニオン型による異なる値の型
これは現実的な設定オブジェクトの例です。既知の真偽値フラグ、既知の文字列、そして任意の追加値を持ちます。シグネチャのユニオン型には、すべての固定プロパティの型が含まれています。
interface Settings {
enabled: boolean
theme: string
[key: string]: boolean | string
}
const s: Settings = { enabled: true, theme: "dark", lang: "en" }
console.log(s.enabled, s.lang)既知のキーを持つ数値インデックス
この制約は数値インデックスシグネチャにも適用されます。名前付きの数値プロパティは、数値インデックスの値の型と一致しなければなりません。
interface Sparse {
count: number
[index: number]: number
}
const sp: Sparse = { count: 1, 0: 100, 1: 200 }
console.log(sp.count, sp[0])よりすっきりした代替方法
固定キーと動的キーの型が本当に無関係な場合は、分けることを検討してください。動的な部分を専用のプロパティの下にネストします。これにより、不自然なユニオン型を無理に使わずに済みます。
interface Better {
name: string
scores: { [key: string]: number }
}
const b: Better = { name: "ana", scores: { math: 90 } }
console.log(b.name, b.scores.math)組み合わせる場合
固定プロパティが追加要素の値の型を自然に共有する場合は、既知のキーと動的なキーを組み合わせます。たとえば、total を持つカウンターや、同じ種類の設定といくつかの必須フラグです。それ以外の場合は、ネストすることで型の整合性を保てます。
interface Tally {
total: number
[bucket: string]: number
}
const t: Tally = { total: 0, a: 3, b: 5 }
t.total = t.a + t.b
console.log(t.total) // 8理解度チェック
固定キーと動的キーの混在についての理解度を確認しましょう。
まとめ
固定プロパティとインデックスシグネチャは一緒に宣言できますが、各固定プロパティの型はインデックスシグネチャの値の型に代入可能でなければなりません。固定プロパティの型が異なる場合は、シグネチャをユニオン型に広げて対応し、固定プロパティがオプションの場合は undefined も含めます。型が本当に無関係なら、動的な部分を専用のキーの下にネストしてください。
よくある質問
「既知のキーと動的なキーの組み合わせ」レッスンは無料ですか？
はい。「既知のキーと動的なキーの組み合わせ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「既知のキーと動的なキーの組み合わせ」で何を学びますか？
固定プロパティとインデックスシグネチャを安全に組み合わせます。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「既知のキーと動的なキーの組み合わせ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- インデックスシグネチャの定義
- 文字列インデックスシグネチャと数値インデックスシグネチャ
- 既知のキーと動的なキーの組み合わせ
- インデックスシグネチャとRecord