TypeScript Academy · 课时

组合已知键与动态键

Q: 「组合已知键与动态键」这节课中我会学到什么？

安全地将固定属性与索引签名结合起来。 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

安全地将固定属性与索引签名结合起来。

第 3 / 4 课13 个步骤

组合已知键与动态键 是 CoddyKit 上的免费 TypeScript Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 TypeScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 4 节课。

固定与灵活并存

对象通常会有几个有保证的属性，同时还允许一组没有固定边界的额外属性。TypeScript 允许您在同一个类型中声明具名属性和索引签名——但有一个重要限制。

索引签名旁的已知键

这里的 length 始终存在，而其他任意字符串键都会映射到数字。具名属性和索引签名可以共存。

interface NumberMap {
  length: number
  [key: string]: number
}
const m: NumberMap = { length: 2, a: 1, b: 1 }
console.log(m.length, m.a)

兼容性限制

关键在于：每个固定属性的类型都必须可以赋值给索引签名的值类型。索引签名是对所有 keys 的承诺，因此每个具名键都必须遵守它。

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)

带已知 keys 的数字索引

数字索引签名同样适用这项限制。具名数字属性必须符合数字索引的值类型。

interface Sparse {
  count: number
  [index: number]: number
}
const sp: Sparse = { count: 1, 0: 100, 1: 200 }
console.log(sp.count, sp[0])

更简洁的替代方案

当固定 keys 和动态 keys 的类型确实互不相关时，可以考虑将它们拆开：把动态部分嵌套在自己的属性下。这样可以避免强行使用不自然的联合类型。

interface Better {
  name: string
  scores: { [key: string]: number }
}
const b: Better = { name: "ana", scores: { math: 90 } }
console.log(b.name, b.scores.math)

何时组合使用

当固定属性自然地与额外属性共享值类型时，可以组合已知 keys 和动态 keys——例如带有 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

快速检查

测试您对混合固定 keys 和动态 keys 的理解。

在交互式课程中回答

回顾

您可以同时声明固定属性和索引签名，但每个固定属性的类型都必须可以赋值给索引签名的值类型。使用联合类型扩大签名，以容纳不同的固定属性类型；当固定属性是可选的时，请包含 undefined。当类型确实互不相关时，应将动态部分嵌套在它自己的键下。

免费开始

用 AI 导师学习 TypeScript — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 101
课程: 352

免费开始学习查看完整课程

常见问题解答

「组合已知键与动态键」课时是免费的吗？

是的 — 「组合已知键与动态键」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 TypeScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 4 节课。

「组合已知键与动态键」这节课中我会学到什么？

安全地将固定属性与索引签名结合起来。你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 TypeScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「组合已知键与动态键」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 TypeScript Academy 课中编写并运行代码吗？

能。每节 TypeScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 TypeScript Academy