Blog TypeScript 之 Indexed Access Types

前言

TypeScript 的官方文档早已更新，但我能找到的中文文档都还停留在比较老的版本。所以对其中新增以及修订较多的章节进行了翻译整理。

我同时搭建了 TypeScript 中文站点: https://ts.yayujs.com ，正是因为我亲自翻译过，所以我认为这是国内最好的系统学习 TS 的教程之一。

本篇整理自 TypeScript Handbook 中「Indexed Access Types」章节。

欢迎围观朋友圈、加入低调务实优秀中国好青年前端社群，一个人走得快，一群人走得远。

正文

我们可以使用 索引访问类型（indexed access type） 查找另外一个类型上的特定属性：

type Person = { age: number; name: string; alive: boolean };
type Age = Person["age"];
// type Age = number

因为索引名本身就是一个类型，所以我们也可以使用联合、keyof 或者其他类型：

type I1 = Person["age" | "name"];  
// type I1 = string | number
 
type I2 = Person[keyof Person];
// type I2 = string | number | boolean
 
type AliveOrName = "alive" | "name";
type I3 = Person[AliveOrName];  
// type I3 = string | boolean

如果你尝试查找一个不存在的属性，TypeScript 会报错：

type I1 = Person["alve"];
// Property 'alve' does not exist on type 'Person'.

接下来是另外一个示例，我们使用 number 来获取数组元素的类型。结合 typeof 可以方便的捕获数组字面量的元素类型：

const MyArray = [
  { name: "Alice", age: 15 },
  { name: "Bob", age: 23 },
  { name: "Eve", age: 38 },
];
 
type Person = typeof MyArray[number];
       
// type Person = {
//    name: string;
//    age: number;
// }

type Age = typeof MyArray[number]["age"];  
// type Age = number

// Or
type Age2 = Person["age"];   
// type Age2 = number

作为索引的只能是类型，这意味着你不能使用 const 创建一个变量引用：

const key = "age";
type Age = Person[key];

// Type 'key' cannot be used as an index type.
// 'key' refers to a value, but is being used as a type here. Did you mean 'typeof key'?

然而你可以使用类型别名实现类似的重构：

type key = "age";
type Age = Person[key];

最后讲一个实战案例：

假设有这样一个业务场景，一个页面要用在不同的 APP 里，比如淘宝、天猫、支付宝，根据所在 APP 的不同，调用的底层 API 会不同，我们可能会这样写：

const APP = ['TaoBao', 'Tmall', 'Alipay'];

function getPhoto(app: string) {
  // ...
}
  
getPhoto('TaoBao'); // ok
getPhoto('whatever'); // ok

如果我们仅仅是对 app 约束为 string 类型，即使传入其他的字符串，也不会导致报错，我们可以使用字面量联合类型约束一下：

const APP = ['TaoBao', 'Tmall', 'Alipay'];
type app = 'TaoBao' | 'Tmall' | 'Alipay';

function getPhoto(app: app) {
  // ...
}
  
getPhoto('TaoBao'); // ok
getPhoto('whatever'); // not ok

但写两遍又有些冗余，我们怎么根据一个数组获取它的所有值的字符串联合类型呢？我们就可以结合上一篇的 typeof 和本节的内容实现：

const APP = ['TaoBao', 'Tmall', 'Alipay'] as const;
type app = typeof APP[number];
// type app = "TaoBao" | "Tmall" | "Alipay"

function getPhoto(app: app) {
  // ...
}
  
getPhoto('TaoBao'); // ok
getPhoto('whatever'); // not ok

我们来一步步解析：

首先是使用 as const 将数组变为 readonly 的元组类型：

const APP = ['TaoBao', 'Tmall', 'Alipay'] as const;
// const APP: readonly ["TaoBao", "Tmall", "Alipay"]

但此时 APP 还是一个值，我们通过 typeof 获取 APP 的类型：

type typeOfAPP = typeof APP;
// type typeOfAPP = readonly ["TaoBao", "Tmall", "Alipay"]

最后在通过索引访问类型，获取字符串联合类型：

type app = typeof APP[number];
// type app = "TaoBao" | "Tmall" | "Alipay"

TypeScript 系列

TypeScript 系列文章由官方文档翻译、重难点解析、实战技巧三个部分组成，涵盖入门、进阶、实战，旨在为你提供一个系统学习 TS 的教程，该系列预计 40 篇左右。

本篇已收录在掘金专栏《TypeScript 系列》。

此外我还写过 JavaScript 系列、React 系列、Next.js 系列、博客搭建系列、冴羽答读者问等 14 个系列文章，全系列文章目录：https://github.com/mqyqingfeng/Blog

通过文字建立交流本身就是一种缘分，欢迎围观我的“朋友圈”、加入“低调务实优秀中国好青年”前端社群，分享技术，带你成长。

Nov 25 '21 10:11 mqyqingfeng

**索引访问类型（indexed access type）** , 这里是不是多了个空格，加粗语法没生效

Nov 29 '21 06:11 btea

@btea 是的，感谢提醒，原文已经修改

Nov 30 '21 01:11 mqyqingfeng

关于最后的实战部分，想请教两个问题

在使用typeof 获取APP中的索引字符串字段的时候，为什么一定要先使用 as const 将其转化为readonly？这个的原理我没太完全理解。尝试后发现，如果不指定为readyonly，那么typeof之后的结果只是string
在这个场景下，我第一反应是使用枚举类型来做定义, 请问这种情况下，使用枚举类型和使用数组来定义的区别或者优劣？枚举类型不方便迭代算一个吗？

enum App {
  'TaoBao' = 'TaoBao',
  'Tmall' = 'Tmall',
  'Alipay' = 'Alipay'
}
function getPhoto(app: App) {
  // ...
}
getPhoto(App.TaoBao);
getPhoto('sss'); // not ok

Jan 25 '22 07:01 Lanbasara

关于最后的实战部分，想请教两个问题

在使用typeof 获取APP中的索引字符串字段的时候，为什么一定要先使用 as const 将其转化为readonly？这个的原理我没太完全理解。尝试后发现，如果不指定为readyonly，那么typeof之后的结果只是string

在这个场景下，我第一反应是使用枚举类型来做定义, 请问这种情况下，使用枚举类型和使用数组来定义的区别或者优劣？枚举类型不方便迭代算一个吗？
enum App {
  'TaoBao' = 'TaoBao',
  'Tmall' = 'Tmall',
  'Alipay' = 'Alipay'
}
function getPhoto(app: App) {
  // ...
}
getPhoto(App.TaoBao);
getPhoto('sss'); // not ok

1.https://github.com/mqyqingfeng/Blog/issues/229

2.enum 会生产很多冗余代码

Jan 29 '22 03:01 slogeor

通过一个数组值,来获取它的索引类型,使用 typeof arr[number] ,这个[number]觉得好别扭阿.有点像泛指arr的所有索引,好怪阿,设计成这样

Sep 30 '22 09:09 YuFengjie97

感谢，说实话索引访问类型之前一直没用到，不过文中实战的例子倒是一个不错的应用场景

Oct 10 '22 03:10 kinneyyan

@YuFengjie97

通过一个数组值,来获取它的索引类型,使用 typeof arr[number] ,这个[number]觉得好别扭阿.有点像泛指arr的所有索引,好怪阿,设计成这样

我觉得可以理解为，先typeof arr,这里取得的是一个类型，而不是一个值，对于这个类型x，我们在通过x[number]，如果x是一个值，[]里面肯定是不能填一个number类型的，而如果x是一个类型，我们可以通过在[]中传入另外一个类型，以达到索引访问类型的效果

Feb 21 '23 02:02 3420580499

关于最后的实战部分，想请教两个问题

在使用typeof 获取APP中的索引字符串字段的时候，为什么一定要先使用 as const 将其转化为readonly？这个的原理我没太完全理解。尝试后发现，如果不指定为readyonly，那么typeof之后的结果只是string

在这个场景下，我第一反应是使用枚举类型来做定义, 请问这种情况下，使用枚举类型和使用数组来定义的区别或者优劣？枚举类型不方便迭代算一个吗？
enum App {
  'TaoBao' = 'TaoBao',
  'Tmall' = 'Tmall',
  'Alipay' = 'Alipay'
}
function getPhoto(app: App) {
  // ...
}
getPhoto(App.TaoBao);
getPhoto('sss'); // not ok

这样在使用的时候需要导入 enum App

Mar 08 '23 09:03 taven-liu