複雜場景下的 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]