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還是認為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的類型變異了
    } 
}

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

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

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

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

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

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

補充：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
  },

總結

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

您可能感興趣的文章: