開發中使用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、泛型的用法