欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2022年03月15日 09:23:58   作者:最后的Hibana  
這篇文章主要給大家介紹了關(guān)于在Typescript中如何使用for...in的相關(guān)資料,以及TypeScript中使用for...in遍歷對象屬性會報錯的解決辦法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

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

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)時,也會遍歷繼承的屬性,所以不能判斷key的類型,只能是string類型。如果用Object的hasOwnProperty方法呢,然而并沒有用,TS還是認(rèn)為key是string類型。這時候需要自己封裝一下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的類型變異了
    } 
}

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

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

是不是很簡單,然而當(dāng)我把接口ABC的a類型改成number的時候,ts又報錯了。

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

WTF,為啥x[key]類型變成never了?因為在賦值的時候,x[key]有兩種類型的可能,永遠(yuǎn)不可能賦值它兩個類型,所以是never?(個人猜想)。如果用之前那種方法也是報一樣的錯誤。由于never是TS中最底層的類型,never 僅能被賦值給另外一個 never 類型,所以x[key]不能被賦值了。 這可怎么辦呢,沒辦法了,只能使用最后的方法了!

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

補(bǔ)充:TypeScript中使用for...in遍歷對象屬性會報錯的解決辦法

最近有一個用ts寫的react項目,在里面使用for…in遍歷對象屬性時報了個錯,類似下面這種:
解決辦法:在 tsconfig.json 文件中加入下面被注釋掉的那一行代碼,即把 抑制隱式索引錯誤 置為真

"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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論