索引访问类型
使用 T[K] 语法查询属性类型。
索引访问类型 是 CoddyKit 上的免费 TypeScript Academy 课时。 这是第 3 节课,共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 TypeScript Academy 学习路径的一部分,你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 4 节课。
查找属性类型
索引访问类型允许您在类型位置使用方括号语法查找属性的类型:Obj['prop']。这就像读取一个值,只不过是在类型层面进行。
基本索引访问
使用字面量 key 为类型建立索引,可以提取该属性的类型。User['name'] 会得到 string。
interface User { id: number; name: string }
type NameType = User["name"] // string
const n: NameType = "Ada"
console.log(n)为什么不直接编写类型
索引访问可以保持类型同步。如果 User.name 从 string 变成其他类型,每个 User['name'] 都会自动更新,无需手动修改。
interface Product { price: { amount: number; currency: string } }
type Price = Product["price"] // { amount: number; currency: string }
const p: Price = { amount: 10, currency: "USD" }
console.log(p)使用 keys 的联合类型进行访问
使用 keys 的联合类型建立索引,可以获得它们值类型的联合类型。User['id' | 'name'] 会得到 number | string。
interface User { id: number; name: string }
type IdOrName = User["id" | "name"] // number | string
const v: IdOrName = 5
console.log(v)使用 Obj[keyof Obj] 获取所有值
使用 keyof Obj 建立索引,可以获得对象中所有值类型的联合类型,也就是完整的值类型集合。
interface Config { host: string; port: number; secure: boolean }
type Values = Config[keyof Config] // string | number | boolean
const v: Values = true
console.log(v)使用 [number] 获取数组元素类型
对于数组类型,使用 number 建立索引,可以获得其元素类型。string[][number] 就是 string。
type Names = string[]
type Item = Names[number] // string
const x: Item = "Ada"
console.log(x)元组的元素类型
使用 number 为元组建立索引,可以获得其所有元素类型的联合类型,这对于从固定列表推导值类型非常有用。
type Pair = [string, number]
type Element = Pair[number] // string | number
const e: Element = 42
console.log(e)与类型查询结合
通过 typeof 获取值的类型。结合 as const 数组上的 [number],可以推导出该数组字面量值的联合类型。
const colors = ["red", "green", "blue"] as const
type Color = typeof colors[number] // "red" | "green" | "blue"
const c: Color = "green"
console.log(c)嵌套索引访问
通过串联查找深入嵌套类型。每一对方括号都会沿结构向下深入一层。
interface Data { user: { profile: { age: number } } }
type Age = Data["user"]["profile"]["age"] // number
const a: Age = 36
console.log(a)泛型中的索引访问
T[K] 与 K extends keyof T 的模式是类型安全获取器的基础:返回类型恰好就是查找到的属性类型。
function get<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key]
}
const port = get({ host: "x", port: 80 }, "port")
console.log(port) // 80, typed as number实际推导示例
索引访问可以避免重复定义类型:直接从领域对象推导函数参数类型,而不是再次声明一遍。
interface Order { items: { sku: string; qty: number }[] }
type LineItem = Order["items"][number] // { sku: string; qty: number }
const li: LineItem = { sku: "A1", qty: 2 }
console.log(li)快速检查
请检验您对索引访问类型的理解。
回顾
索引访问类型(Obj['prop'])会查找属性的类型,并与源类型保持同步。使用键的联合类型可以得到值类型的联合,使用 keyof Obj 可以得到所有值的类型,使用 number 可以得到数组或元组元素的类型。对于嵌套查找可以串联方括号,还可以结合 typeof 和泛型(T[K])进行类型安全的推导。
常见问题解答
「索引访问类型」课时是免费的吗?
是的 — 「索引访问类型」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 TypeScript Academy 课程的其余内容,请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 4 节课。
「索引访问类型」这节课中我会学到什么?
使用 T[K] 语法查询属性类型。 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 TypeScript Academy 需要有经验吗?
无需任何先前经验。CoddyKit 上的 TypeScript Academy 课程适合初学者到高级学习者,你可以从这里开始或从头开始,按照自己的节奏学习。 这是第 3 节课,共 4 节。
「索引访问类型」课时需要多长时间?
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动,所以你能稳步进步,并在网页和应用中从离开的地方继续。
我能在这节 TypeScript Academy 课中编写并运行代码吗?
能。每节 TypeScript Academy 课都包含内置代码编辑器,你可以在浏览器中直接编写并运行真实代码,并获得即时 AI 反馈 — 无需本地设置。