文字列インデックスシグネチャと数値インデックスシグネチャ

インデックスキーの2つの種類

数値インデックスシグネチャ

type NumberList = { [index: number]: string }

const names: NumberList = { 0: "ana", 1: "leo" }
console.log(names[0]) // ana

JSは数値キーを文字列に変換する

const obj: Record<string, string> = {}
obj[1] = "one"
console.log(obj["1"]) // one — same key!
console.log(Object.keys(obj)) // ["1"]

互換性のルール

interface Mixed {
  [key: string]: string
  [index: number]: string // must match the string value type
}
const m: Mixed = { 0: "a", name: "b" }
console.log(m[0], m.name)

このルールが存在する理由

// This is an ERROR:
// interface Bad {
//   [key: string]: string
//   [index: number]: number // number not assignable to string
// }

数値インデックス型：配列

const nums: number[] = [10, 20, 30]
const first: number = nums[0]
console.log(first + nums[2]) // 40

タプルも数値でインデックス付けされる

const pair: [string, number] = ["age", 30]
const label: string = pair[0]
const value: number = pair[1]
console.log(label + ": " + value)

文字列インデックスではどちらのアクセスも可能

type Bag = { [key: string]: number }
const b: Bag = {}
b[5] = 100        // stored as key "5"
console.log(b["5"]) // 100

数値インデックスでは文字列を受け付けない

type OnlyNumbers = { [i: number]: string }
const o: OnlyNumbers = { 0: "x" }
// o.name = "y" // Error: property name not on number-indexed type
console.log(o[0])

どちらを選ぶか

type Positions = { [i: number]: { x: number; y: number } }
type ByName = { [name: string]: { x: number; y: number } }
const p: Positions = { 0: { x: 1, y: 2 } }
console.log(p[0].x)

実用的な混在オブジェクト

interface Flexible {
  [key: string]: number
  [index: number]: number
}
const f: Flexible = { 0: 1, total: 99 }
console.log(f[0] + f.total) // 100

理解度チェック

まとめ