알려진 키와 동적 키 결합

고정 속성과 Flexible

시그니처와 함께 사용하는 알려진 key

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)

제약 조건을 위반하면

// 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가 필요한 이유

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)

알려진 keys가 있는 숫자 인덱스

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)

언제 결합할까요

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

빠른 확인

복습