怎么解決TypeScript遍歷對(duì)象屬性的問題

這篇文章主要講解了“怎么解決TypeScript遍歷對(duì)象屬性的問題”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么解決TypeScript遍歷對(duì)象屬性的問題”吧！

一、問題　

　比如下面的代碼：

type Animal = {
    name: string;
    age: number
}

const animal:Animal={
    name:"dog",
    age:12
}

function test(obj:Animal) {
    for (let k in obj) {
        console.log(obj[k])。//這里出錯(cuò)
    }
}
test(animal)

報(bào)錯(cuò)：

二、解決辦法

1. 把對(duì)象聲明as any

function test(obj:Animal) {
    for (let k in obj) {
        console.log((obj as any)[k]) //不報(bào)錯(cuò)
    }
}

　　這個(gè)方法直接繞過了typescript的校驗(yàn)機(jī)制

2. 給對(duì)象聲明一個(gè)接口

type Animal = {
    name: string;
    age: number;
    [key: string]: any
}

const animal:Animal={
    name:"dog",
    age:12
}

function test(obj:Animal) {
    for (let k in obj) {
        console.log(obj [k]) //不報(bào)錯(cuò)
    }
}
test(animal)

　　這個(gè)可以針對(duì)比較常見的對(duì)象類型，特別是一些工具方法。

3. 使用泛型

function test<T extends object>(obj:T) {
    for (let k in obj) {
        console.log(obj [k]) //不報(bào)錯(cuò)
    }
}

4. 使用keyof

function test(obj:Animal) {
    let k: (keyof Animal);
    for (k in obj) {
        console.log(obj [k]) //不報(bào)錯(cuò)
    }
}

感謝各位的閱讀，以上就是“怎么解決TypeScript遍歷對(duì)象屬性的問題”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)怎么解決TypeScript遍歷對(duì)象屬性的問題這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！