typescript中使用Object.keys

開發中使用typescript的時候，經常會遇到使用 Object.keys 這個方法報錯的情況，報錯如下:

錯誤場景1

var foo = {
    a: '1',
    b: '2'
}

var getPropertyValue = Object.keys(foo).map(item => foo[item]) // 這里會有typescript的錯誤提示

 錯誤場景2

var foo = {
    a: '1',
    b: '2'
}

function getPropertyValue(obj, key) { // 這里也會提示obj會有any類型 return obj[key]
}

 

場景1解決方案:

通過 keyof 的方式可以獲取ts 類型的屬性key的值

 

var foo = {
    a: '1',
    b: '2'
}

// 這里typeof foo => foo的類型 等同於 interface Foo { a: string; b: string; }
// typeof foo === Foo，這里只所以用 typeof foo，因為這樣方便，對於不想寫interface的直接量對象很容易獲取它的類型
// keyof typeof foo這里只獲取 Foo的類型的key值，注意這個keyof后面一定是 typescript的類型

type FooType = keyof typeof foo; 

var getPropertyValue = Object.keys(foo).map(item => foo[item as FooType])

 

場景2解決方案:

var foo = {
    a: '1',
    b: '2'
}
// 這里聲明了兩個泛型 T 和 K
// T 代表函數第一個參數的類型，K 代表函數第二個參數的類型這個類型指向第一個參數類型中包含的key的值
function getPropertyValue<T, K extends keyof T>(obj:T, key:K):T[K] {
    return obj[key]
}
getPropertyValue(foo, 'a')

 

總結：

這里涉及到typescript的兩個知識點

1、keyof的用法

2、泛型的用法