typescript索引类型_复杂场景下的 typescript 类型锚定 （1） ----- 对象索引提取-阿里云开发者社区...

前言：在编写 typescript 应用的时候，有时候我们会希望复用或者构造一些特定结构的类型，这些类型只从 typescript 靠内建类型和 interface、class 比较难以表达，这时候我们就需要用到类型推导。

keyof

在 typescript 我们可以用 keyof 关键字来提取对象的索引标记.

// obj 是一个对象, typeof 得到了其类型

keyof (typeof obj)

对象的 string 和 number 索引

对于 es5 而言，毋庸置疑一个对象(hash dictionary)的索引只可能是 string 和 number 两种类型；

// One simiple object with any type key-value

interface Foo {

[k: string]: any

}

type TFOO = keyof Foo // string | number

数组的元素索引有自己特殊含义，但它的类型仍然是 number.

const a = []

type TA = keyof (typeof a)

/**

number | "length" | "toString" | "toLocaleString" | "pop" | "push" | "concat" | "join" | "reverse" | "shift" | "slice" | "sort" | "splice" | "unshift" | "indexOf" | "lastIndexOf" | ...

*/

Symbol 索引

从 es6 开始, javascript 允许使用 Symbol 作为对象索引

interface objWithSymbol {

foo: string

[Symbol.toStringTag]: any

}

type T_OBJ_WITH_SYM = keyof objWithSymbol // "foo"

const a_with_symkey = {

[Symbol('#symA')]: 'bar'

}

type T_A = keyof typeof a_with_symkey // number | string

截止到笔者书写到此为止, typescript 还不支持通过 keyof 关键词提取 Symbol 类型的索引，这也无可厚非，因为在表述上，往往 Symbol 类型的索引并不被当成 "key". 也没有别的官方方式可以直接提取一个 interface 或对象类型中的 Symbol 类型的索引. 这其实可以理解: Symbol 作为对象索引的意义在于唯一性, 它本身不具有字面量(literal text),其唯一性的保障是运行时的内存分配，而非字面量.

在 typescript 中，这样写会被提示违反了类型约束:

const a = {}

// lint: 类型“{}”上不存在属性“foo”。ts(2339)

a.foo = 'bar'

但这样就不会:

const a = {}

a[Symbol('#symA')] = 'bar'

注意 Symbol 作为对象的索引是, 其不具有 enumerable: true 的属性，即默认无法被 Object.keys(...) 和 for...in 提取.

类似于获取获取一个对象中 string | number 类型的索引的方法是 Object.getOwnPropertyNames(); 获取一个对象中所有 Symbol 类型索引的方式 Object.getOwnPropertySymbols();

用 any 作为索引提取元素类型

有时候我们声明了一个所有元素类型一致(比如都为 string)的数组(类型为 string[]), 我们希望得到数组中的元素的类型, 用于后续的变量约束，这时候怎么办？

const a: string[] = []

type ELE_A = string

对简单的内建类型，我们当然可以简单声明，或者干脆就把 a 声明为 ELE_A[];

如果是这样呢？

const a: {a: string, b: string, c: number}[] = []

我们当然可以提前声明 ELE_A , 然后把 a 声明为 ELE_A[]

那如果是这样呢?

const a: {a: string, b: string, c: number}[] = []

const a1: {a: string, b: string}[] = []

const a2: {foo: string, c: string}[] = []

如果对每个变量都提前声明，难免让人有种在写 C 的感觉：先声明、再调用。

使用 any 可以帮我们提取其中的元素，比如

const a: {a: string, b: string, c: number}[] = []

type T_A = (typeof a)[any]

const a1: {a: string, b: string}[] = []

type T_A1 = (typeof a1)[any]

const a2: {foo: string, c: string}[] = []

type T_A2 = (typeof a2)[any]

这样，对于只复用一两次的数组元素中的类型，我们不必特意提前声明，而是先声明变量，再提取.

直接从已有的 interface 中提取

对于以下 interface, 如果想提取 foo2 (是一个数组)中的元素的类型，怎么办？

interface A {

foo: {

foo2: {

foo3: string[]

}[]

}

}

直接从 A 索引到 foo2, 然后使用 any 提取其元素

type FOO2_ELE = A['foo']['foo2'][any]