typeof、keyof 与索引访问类型TypeScript-New-Handbook 类型提取三剑客【免费下载链接】TypeScript-New-HandbookIncubation repository for the new TypeScript handbook 项目地址: https://gitcode.com/gh_mirrors/ty/TypeScript-New-HandbookTypeScript 最强大的能力之一就是类型提取——用已经存在的值或类型推导出全新的类型从而减少重复代码、提升维护性。在官方新手册 TypeScript-New-Handbook 中专门用一章《Types from Extraction》系统讲解了三个核心工具typeof、keyof与索引访问类型Indexed Access Types它们被开发者亲切地称为类型提取三剑客。这篇文章面向新手不堆砌复杂概念用最通俗的讲解和少量示例帮你一次搞懂它们各自的作用与搭配技巧。什么是类型提取为什么新手必须掌握简单说类型提取就是用一个类型的形状推导出另一个类型。它和泛型一样都是 TypeScript 类型系统表达类型之间的关系的方式但更贴近日常场景。举个例子你写了一个对象数组想拿到数组里单个元素的类型难道要手动再写一遍完全不用——用三剑客中的typeof 索引访问类型几行代码就能自动搞定而且数据源一变类型自动跟着变永远不会手写错。在 TypeScript-New-Handbook 项目中这一主题的完整讲解位于源文件chapters/Types from Extraction.md渲染后的网页版在docs/chapters/types-from-extraction/index.html建议边读文章边对照原文。三剑客作用一句话适用场景typeof把值变成类型从变量、函数提取类型keyof取出对象的所有键生成键的联合类型索引访问类型精准取出属性的类型从类型中挖出子类型typeof 类型运算符把值变成类型的桥梁 JavaScript 本身就有typeof比如typeof hello会返回字符串string。TypeScript 在此基础上赋予它一个类型上下文中的新使命引用某个变量或属性的类型。let s hello; let n: typeof s; // n 的类型是 string对新手来说最有价值的用法是和内置类型工具ReturnTypeT配合先取函数的类型再自动得到它的返回值类型。注意不能直接写ReturnTypef因为f是值而不是类型必须加上typeof转一下function f() { return { x: 10, y: 3 }; } type P ReturnTypetypeof f; // 自动得到 { x: number; y: number }⚠️ 有一个限制要记住typeof只能作用于标识符变量名或其属性不能写typeof f()这样的调用表达式这是 TypeScript 为了避免看似在执行、其实没有的陷阱而有意设计的。keyof 操作符一键取出对象的所有键 ️keyof接收一个对象类型返回它的所有键组成的字符串或数字字面量联合类型type Point { x: number; y: number }; type P keyof Point; // 等价于 x | y有了P你就能用它约束参数必须传x或y杜绝拼错字符串的隐患。当类型带有索引签名时keyof会返回索引类型本身。特别要注意一个经典坑对{ [k: string]: boolean }取keyof得到的是string | number——因为 JavaScript 的对象键总会强制转成字符串obj[0]和obj[0]其实是同一个键。keyof的最大威力在于和**映射类型Mapped Types**配合实现批量转换字段、生成只读版本等高级操作这部分在手册后续章节还会展开。索引访问类型精准挖出属性的类型 ⛏️如果keyof是取出所有键那么索引访问类型就是按需取某一键的类型写法上像在给类型加下标type Person { age: number; name: string; alive: boolean }; type A Person[age]; // number它的索引位置本身也是类型所以可以玩出很多花样type I1 Person[age | name]; // number | string type I2 Person[keyof Person]; // number | string | boolean type AliveOrName alive | name; type I3 Person[AliveOrName]; // boolean | string如果写错属性名比如Person[alve]TypeScript 会立刻报错帮你把笔误挡在编译之前。最实用的场景之一提取数组元素类型。用number作为索引再配合typeof就能从数组字面量直接得到元素类型const MyArray [ { name: Alice, age: 15 }, { name: Bob, age: 23 }, ]; type T (typeof MyArray)[number]; // 自动得到 { name: string; age: number }以后再也不用为数组里的对象长什么样重复手写类型了。三剑客组合实战从真实数据自动生成类型 把三者串联起来就能实现数据驱动类型的最佳实践先用typeof把常量、函数等值转为类型再用keyof取出键集合最后用索引访问类型精准定位某个属性或整个数组元素的类型。这样写出的代码类型永远与真实数据保持一致改数据源时无需同步修改类型定义尤其适合处理接口返回的配置对象、国际化文案表等场景。总结与学习路径 一句话记住三剑客typeof取值的类型keyof取对象的键索引访问取属性的类型。三者独立使用很简单组合起来却能量巨大是进阶 TypeScript 类型体操的必经之路。想深入学习的读者推荐按以下路径阅读 TypeScript-New-Handbook 项目本章完整源码chapters/Types from Extraction.md网页版文档docs/chapters/types-from-extraction/index.html关联章节chapters/Narrowing.mdtypeof类型守卫的运行时用法基础铺垫chapters/Everyday Types.md常见类型与typeof的关系把这三个工具练熟你会发现 TypeScript 的类型系统远比想象中更聪明、更好用。【免费下载链接】TypeScript-New-HandbookIncubation repository for the new TypeScript handbook 项目地址: https://gitcode.com/gh_mirrors/ty/TypeScript-New-Handbook创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
