0Pricing
TypeScript Academy · 课时

索引访问类型

使用 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 反馈 — 无需本地设置。

此课程中的所有课时

  1. typeof 类型运算符
  2. keyof 类型运算符
  3. 索引访问类型
  4. 组合 typeof 与 keyof
← 返回 TypeScript Academy