TypeScript踩坑之TS7053的問題及解決
更新時(shí)間：2023年01月21日 08:22:36 作者：Anwel
這篇文章主要介紹了TypeScript踩坑之TS7053的問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
TypeScript踩坑之TS7053
錯(cuò)誤：TS7053: Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type xxx
在 vue 中如果用 TypeScript 寫類似如下的代碼，用 []定位對(duì)象中的某一個(gè)屬性，因?yàn)門ypeScript的類型檢查，編譯會(huì)報(bào)TS7053錯(cuò)誤
const Map1 = {
a: '1',
b: '2',
c: '3'
}
const Map2 = {
d: '1',
e: '2',
f: '3'
}
function test(): void {
let str = 'abcdef';
let key = str.substr(1, 1);
console.log(Map1[key]);
console.log(Map2[key]);
}
test();
解決方法
就是另寫一個(gè)函數(shù)判斷一下對(duì)象有沒有key那個(gè)屬性
const Map1 = {
a: '1',
b: '2',
c: '3'
}
const Map2 = {
d: '1',
e: '2',
f: '3'
}
function isValidKey(key: string, obj: {[propName: string]: amy}): key is keyof typeof obj {
return key in obj;
}
function test(): void {
let str = 'abcdef';
let key = str.substr(1, 1); // 'b'
if (isValidKey(key, Map1) console.log(Map1[key]); // '2'
if (isValidKey(key, Map2) console.log(Map2[key]); // 不會(huì)輸出
}
test();
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue實(shí)現(xiàn)Hover功能(mouseover與mouseenter的區(qū)別及說明)
這篇文章主要介紹了Vue實(shí)現(xiàn)Hover功能(mouseover與mouseenter的區(qū)別及說明)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue-Cli如何在index.html中進(jìn)行環(huán)境判斷
這篇文章主要介紹了Vue-Cli如何在index.html中進(jìn)行環(huán)境判斷問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了vue中的inject用法及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue組件之間通信方式實(shí)例總結(jié)【8種方式】
這篇文章主要介紹了vue組件之間通信方式,結(jié)合實(shí)例形式總結(jié)分析了vue.js的8種組件通信方式與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-02-02
vue項(xiàng)目webpack中Npm傳遞參數(shù)配置不同域名接口
這篇文章主要介紹了vue項(xiàng)目webpack中Npm傳遞參數(shù)配置不同域名接口，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了詳解Vue3中對(duì)VDOM的改進(jìn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue移動(dòng)端彈起蒙層滑動(dòng)禁止底部滑動(dòng)操作
這篇文章主要介紹了vue移動(dòng)端彈起蒙層滑動(dòng)禁止底部滑動(dòng)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue中data里面的數(shù)據(jù)相互使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要為大家詳細(xì)介紹了Vue3使用訊飛大模型的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-12-12
Vue啟動(dòng)失敗報(bào)錯(cuò):Module?not?found:?Error:?Can‘t?resolve?&apos
這篇文章主要給大家介紹了關(guān)于Vue啟動(dòng)失敗報(bào)錯(cuò):Module?not?found:?Error:?Can‘t?resolve?'less-loader'解決的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03