在Typescript中如何使用for...in詳解

更新時(shí)間：2022年03月15日 09:23:58 作者：最后的Hibana

這篇文章主要給大家介紹了關(guān)于在Typescript中如何使用for...in的相關(guān)資料,以及TypeScript中使用for...in遍歷對(duì)象屬性會(huì)報(bào)錯(cuò)的解決辦法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

如何在Typescript中使用for...in ？本人在TS中用for...in出現(xiàn)了些問題，也想到了一些解決方法。那么先來(lái)看看下面報(bào)錯(cuò)的代碼吧。

interface ABC {
    a: string
    b: string
}
const x: ABC = {
    a:'1',
    b:'2'
}
const y: ABC = {
    a:'3',
    b:'4'
}
for (const key in x) {
// 在類型 "ABC" 上找不到具有類型為 "string" 的參數(shù)的索引簽名。ts(7053)
    x[key] = y[key]
}

這由于在for...in循環(huán)時(shí)，也會(huì)遍歷繼承的屬性，所以不能判斷key的類型，只能是string類型。如果用Object的hasOwnProperty方法呢，然而并沒有用，TS還是認(rèn)為key是string類型。這時(shí)候需要自己封裝一下hasOwnProperty方法。

function hasOwnProperty<T, K extends PropertyKey>(
    obj: T,
    prop: K
): obj is T & Record<K, unknown> {
    return Object.prototype.hasOwnProperty.call(obj, prop);
}
for (const key in x) { 
    if (hasOwnProperty(y,key) && hasOwnProperty(x,key)) {
        x[key] = y[key]
        //可以看到let x: ABC & Record<string, unknown>
        //x的類型變異了
    } 
}

這樣就好了,這可也實(shí)在是太麻煩了。我只是遍歷一個(gè)簡(jiǎn)單對(duì)象，為何要搞得這么麻煩，當(dāng)然還是有簡(jiǎn)單方法的。只要循環(huán)的時(shí)候這樣寫就好了。

let key:keyof ABC
for (key in x) {
    x[key] = y[key]
}

是不是很簡(jiǎn)單，然而當(dāng)我把接口ABC的a類型改成number的時(shí)候，ts又報(bào)錯(cuò)了。

//不能將類型“string | number”分配給類型“never”。
//不能將類型“string”分配給類型“never”。ts(2322)

WTF，為啥x[key]類型變成never了？因?yàn)樵谫x值的時(shí)候，x[key]有兩種類型的可能，永遠(yuǎn)不可能賦值它兩個(gè)類型，所以是never？（個(gè)人猜想）。如果用之前那種方法也是報(bào)一樣的錯(cuò)誤。由于never是TS中最底層的類型，never 僅能被賦值給另外一個(gè) never 類型，所以x[key]不能被賦值了。這可怎么辦呢，沒辦法了，只能使用最后的方法了！

let key:keyof ABC
//@ts-ignore
for (key in x) {
    x[key] = y[key]
}

補(bǔ)充：TypeScript中使用for...in遍歷對(duì)象屬性會(huì)報(bào)錯(cuò)的解決辦法

最近有一個(gè)用ts寫的react項(xiàng)目，在里面使用for…in遍歷對(duì)象屬性時(shí)報(bào)了個(gè)錯(cuò)，類似下面這種：
解決辦法：在 tsconfig.json 文件中加入下面被注釋掉的那一行代碼，即把抑制隱式索引錯(cuò)誤置為真

"compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    // "suppressImplicitAnyIndexErrors": true,
    "importHelpers": true,
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "sourceMap": true,
    "baseUrl": "./",
    "strict": true,
    "paths": {
      "@/*": ["src/*"],
      "@@/*": ["src/.umi/*"]
    },
    "allowSyntheticDefaultImports": true
  },

總結(jié)

到此這篇關(guān)于在Typescript中如何使用for...in的文章就介紹到這了,更多相關(guān)Typescript中使用for...in內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: