TypeScript Academy · 课时

keyof 与索引访问类型(入门)

使用 keyof 创建属性名联合,并使用索引访问类型(T[K] / T["prop"])安全地读取属性类型。

第 3 / 3 课8 个步骤

keyof 与索引访问类型(入门) 是 CoddyKit 上的免费 TypeScript Academy 课时。 这是第 3 节课,共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 TypeScript Academy 学习路径的一部分,你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 3 节课。

简介

目标:使用键名运算符(属性名联合类型)和索引访问(T[K])构建更安全的辅助函数,以读取属性类型。

键名运算符

键名运算符会生成某种类型的属性名联合类型(例如 "id" | "name" | "email")。

interface User {
  id: number;
  name: string;
  email?: string;
}

type UserKeys = keyof User;  // "id" | "name" | "email"

键名运算符与类型查询

请使用键名运算符与类型查询从值(对象)中获取键,以便为参数指定类型。

const SETTINGS = {
  theme: "dark",
  lang: "en",
} as const;

type SettingKey = keyof typeof SETTINGS; // "theme" | "lang"

索引访问

索引访问会返回某个属性的类型:User["name"] 是 string。

interface User {
  id: number;
  name: string;
  email?: string;
}

type NameType = User["name"]; // string

getProperty 辅助函数

请将键名运算符与 K extends keyof T结合,限制可用的键,并返回精确的 T[K] 类型。

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const u = { id: 1, name: "Ada" };
const v1 = getProperty(u, "name"); // string
const v2 = getProperty(u, "id");   // number
console.log(v1.toUpperCase(), v2.toFixed(0));

提示

提示:

  • 对于来自对象的键,请优先使用键名运算符与类型查询。
  • 请使用T[K]反映属性类型,无需重复定义模型。
  • 避免使用字符串形式的键,依靠联合类型来确保安全。

索引访问检查

快速检查:T[K] 表示什么?

回顾

回顾:键名运算符提供键名联合类型;键名运算符与类型查询从值中派生键名;T[K]读取属性类型,非常适合构建安全的辅助函数。

免费开始

用 AI 导师学习 TypeScript — 免费

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

课程
101
课程
352

常见问题解答

「keyof 与索引访问类型(入门)」课时是免费的吗?

是的 — 「keyof 与索引访问类型(入门)」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 TypeScript Academy 课程的其余内容,请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 3 节课。

「keyof 与索引访问类型(入门)」这节课中我会学到什么?

使用 keyof 创建属性名联合,并使用索引访问类型(T[K] / T["prop"])安全地读取属性类型。 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗?

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

「keyof 与索引访问类型(入门)」课时需要多长时间?

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

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

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

此课程中的所有课时

  1. 泛型函数与约束(extends、默认参数)
  2. Partial、Readonly、Record、Pick、Omit
  3. keyof 与索引访问类型(入门)
← 返回 TypeScript Academy