遍歷對象屬性
在TypeScript里面，當需要遍歷對象的時候，經常就會遇到下圖所示的錯誤提示。
function test (foo: object) {
for (let key in foo) {
console.log(foo[key]); // typescript錯誤提示
// do something
}
}
有兩個報錯
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'.
因為foo作為object沒有聲明string類型可用，所以foo[key]將會是any類型。
No index signature with a parameter of type 'string' was found on type '{}'.
object沒有找到string類型的
解決方法
那么，針對這種情況，我們有幾種解決方法
- 把對象聲明as any
function test (foo: object) {
for (let key in foo) {
console.log((foo as any)[key]); // 報錯消失
// do something
}
}
復制代碼但是這個方法有點像是直接繞過了typescript的校驗機制，失去了使用typescript的初心，這不是我們想要的。
- 給對象聲明一個接口
interface SimpleKeyValueObject {
[key: string]: any
}
function test (foo: SimpleKeyValueObject) {
for (let key in foo) {
console.log(foo[key]); // 報錯消失
// do something
}
}
這個可以針對比較常見的對象類型，特別是一些工具方法。
但是這個不夠騷，能不能再厲害點呢～
- 使用泛型
function test<T extends object> (foo: T) {
for (let key in foo) {
console.log(foo[key]); // 報錯消失
// do something
}
}
當我們需要對foo的key進行約束時，我們可以使用下面的第4種方法。
- 使用keyof
interface Ifoo{
name: string;
age: number;
weight: number;
}
function test (opt: Ifoo) {
let key: (keyof Ifoo);
for (key in opt) {
console.log(opt[key]); // 報錯消失
// do something
}
}
作者：Rio_Kwok
鏈接：https://juejin.cn/post/6844904147146260488
來源：稀土掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
