TypeScript踩坑之TS7053的問題及解決
更新時間：2023年01月21日 08:22:36 作者：Anwel
這篇文章主要介紹了TypeScript踩坑之TS7053的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
TypeScript踩坑之TS7053
錯誤：TS7053: Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type xxx
在 vue 中如果用 TypeScript 寫類似如下的代碼，用 []定位對象中的某一個屬性，因為TypeScript的類型檢查，編譯會報TS7053錯誤
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();
解決方法
就是另寫一個函數(shù)判斷一下對象有沒有key那個屬性
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]); // 不會輸出
}
test();
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決vue單頁路由跳轉(zhuǎn)后scrollTop的問題
今天小編就為大家分享一篇解決vue單頁路由跳轉(zhuǎn)后scrollTop的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了在?Vue?中控制表單輸入方法詳解的相關(guān)資料,需要的朋友可以參考下2023-04-04
用vue實現(xiàn)注冊頁效果?vue實現(xiàn)短信驗證碼登錄
這篇文章主要為大家詳細(xì)介紹了用vue實現(xiàn)注冊頁，短信驗證碼登錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
vue/Element?UI實現(xiàn)Element?UI?el-dialog自由拖動功能實現(xiàn)
最近工作上需要在el-dialog基礎(chǔ)上進(jìn)行些功能的改動,下面這篇文章主要給大家介紹了關(guān)于vue/Element?UI實現(xiàn)Element?UI?el-dialog自由拖動功能實現(xiàn)的相關(guān)資料,需要的朋友可以參考下2023-06-06
Vue導(dǎo)入excel文件的兩種方式(form表單和el-upload)
最近開發(fā)遇到一個點擊導(dǎo)入按鈕讓excel文件數(shù)據(jù)導(dǎo)入的需求,下面這篇文章主要給大家介紹了關(guān)于Vue導(dǎo)入excel文件的兩種方式,分別是form表單和el-upload兩種方法,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了在JS中如何同步修改vue中的變量問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了淺談vant組件Picker 選擇器選單選問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
本文主要介紹了基于Vue3的全屏拖拽上傳組件，其實思路上與其他拖拽上傳組件基本一樣,都是指定一個區(qū)域可拖拽,然后讀取文件在上傳，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-09-09
這篇文章主要給大家介紹了關(guān)于Vue.js的復(fù)用組件開發(fā)流程的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
Vue CLI3基礎(chǔ)學(xué)習(xí)之pages構(gòu)建多頁應(yīng)用
這篇文章主要給大家介紹了關(guān)于Vue CLI3基礎(chǔ)學(xué)習(xí)之pages構(gòu)建多頁應(yīng)用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Vue CLI3具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06