在Typescript中如何使用for...in詳解
如何在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)文章
用Javascript評估用戶輸入密碼的強(qiáng)度實現(xiàn)代碼
用Javascript評估用戶輸入密碼的強(qiáng)度實現(xiàn)代碼,需要的朋友可以參考下。2011-11-11JS獲取當(dāng)前網(wǎng)頁大小以及屏幕分辨率等
這篇文章主要介紹了JS獲取當(dāng)前網(wǎng)頁大小以及屏幕分辨率等,方法雖簡單,但比較實用,需要的朋友可以參考下2014-09-09JavaScript中將值轉(zhuǎn)換為字符串的五種方法總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScript中將值轉(zhuǎn)換為字符串的五種方法,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06javascript運(yùn)動框架用法實例分析(實現(xiàn)放大與縮小效果)
這篇文章主要介紹了javascript運(yùn)動框架用法,結(jié)合實例形式分析了javascript運(yùn)動框架的實現(xiàn)與使用技巧,可實現(xiàn)div塊的放大與縮小功能,需要的朋友可以參考下2016-01-01JS中數(shù)據(jù)結(jié)構(gòu)與算法---排序算法(Sort Algorithm)實例詳解
排序也稱排序算法 (Sort Algorithm),排序是將 一組數(shù)據(jù) , 依指定的順序 進(jìn)行 排列的過程 。這篇文章主要介紹了數(shù)據(jù)結(jié)構(gòu)與算法---排序算法(Sort Algorithm),需要的朋友可以參考下2019-06-06