關(guān)于TypeScript的踩坑記錄
用字符串做下標(biāo)報錯
代碼示例：
const person = {
name: '張三',
age: 10
};
function getValue(arg: string) {
return person[arg];
}錯誤信息：
Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type ‘{ name: string; age: number; }’.
No index signature with a parameter of type ‘string’ was found on type ‘{ name: string; age: number; }’.ts(7053)
解決方法1：
在tsconfig.json中配置suppressImplicitAnyIndexErrors: true
{
"compilerOptions": {
"suppressImplicitAnyIndexErrors": true,
...
},
...
}解決方法2：
給person定義接口
const person = {
name: '張三',
age: 10
};
function getValue(arg: string) {
interface IPerson {
[key: string]: any
}
return (<IPerson>person)[arg];
}函數(shù)內(nèi)使用this報錯
代碼示例：
function test() {
this.title = 'hello';
}錯誤信息：
‘this’ implicitly has type ‘any’ because it does not have a type annotation.ts(2683)
解決方法：
在tsconfig.json中配置noImplicitThis: true
{
"compilerOptions": {
"noImplicitThis": true,
...
},
...
}找不到模塊XXX
代碼示例：
import CryptoJS from 'crypto-js';
錯誤信息：
Cannot find module ‘crypto-js’.ts(2307)
解決方法：
安裝對應(yīng)的聲明文件
cnpm install --save-dev @types/crypto-js
模塊聲明文件搜索： https://microsoft.github.io/TypeSearch/
如果安裝不了或搜不到聲明文件，請看下面這種方法
引入模塊提示找不到聲明文件(接上一個問題)
示例代碼
import CryptoJS from 'crypto-js';
錯誤信息：
解決方法：
在src目錄下修改shims-vue.d.ts聲明文件，在末尾增加一行 declare module 'xxx模塊名';
shims-vue.d.ts文件內(nèi)容如下：
declare module '*.vue' {
import Vue from 'vue';
export default Vue;
}
declare module 'crypto-js';JSON直接解析localStorage值報錯
代碼示例：
JSON.parse(window.localStorage.getItem('token'));錯誤信息：
Argument of type ‘string | null’ is not assignable to parameter of type ‘string’.
Type ‘null’ is not assignable to type ‘string’.ts(2345)
解決方法：
定義一個指定類型為string的變量接收localStorage值
let token: string | null = window.localStorage.getItem('token');
if (token) {
JSON.parse(token);
}初始加載的組件未命名，瀏覽器打開頁面后控制臺報錯
代碼示例：
//index.vue
@Component
export default class extends Vue {}//router.ts
import Index from '@/views/index.vue';
const routes: Array<RouteConfig> = [
{
path: '/',
name: 'index',
component: Index,
}
];錯誤信息：
Invalid component name: “_class2”. Component names should conform to valid custom element name in html5 specification.
解決方法：
給初始加載的組件命名
//index.vue
@Component({
name: 'Index'
})
export default class extends Vue {}初始值未定義類型，后面賦值報錯
代碼示例：
export default class extends Vue {
private search = {
name: '',
types: [];
};
private typesChange(value: string[]) {
this.search.types = value; //這里報錯
}
}錯誤信息：
Type ‘string[]’ is not assignable to type ‘never[]’.
Type ‘string’ is not assignable to type ‘never’.
解決方法：
給初始賦值類型斷言
export default class extends Vue {
private search = {
name: '',
types: [] as string[]; //這里加斷言
};
private typesChange(value: string[]) {
this.search.types = value;
}
}在Vue原型上添加屬性使用時報錯
示例代碼
import Vue from 'vue'; import http from './http'; Vue.prototype.$http = http;
this.$http.post('/test', {}).then(
(resolve: any) => {
console.log(resolve);
},
(reject: any) => {
console.log(reject);
}
);錯誤信息：
解決方法：
在src目錄下新建vue.d.ts聲明文件
vue.d.ts文件內(nèi)容如下：
import Vue from 'vue';
declare module 'vue/types/vue' {
interface Vue {
$http: any;
}
}element-ui使用$message報錯
解決方法：
在src目錄下新建vue.d.ts聲明文件
vue.d.ts文件內(nèi)容如下：
import Vue from 'vue';
import { ElMessage } from 'element-ui/types/message';
declare module 'vue/types/vue' {
interface Vue {
$message: ElMessage;
}
}vue-cli里使用process對象報錯類型找不到
解決方法：
修改項目根目錄下的tsconfig.json文件中的compilerOptions.types值，新增node
compilerOptions.types配置內(nèi)容如下：
"compilerOptions": {
"types": ["webpack-env", "node"],
}vue-cli里tsconfig.json文件報錯
錯誤信息：
JSON schema for the typescript compiler's configuration file.
cannot find type definition file for 'webpack-env'.
解決方法：
沒找到好的解決方法，偶然間嘗試了下面的方法居然就不報錯了，這種方法不一定適用所有人的項目
修改項目根目錄下的tsconfig.json文件中的compilerOptions.types值，先新增"nodejs"，再刪除"nodejs"
先新增：
"compilerOptions": {
"types": ["webpack-env", "nodejs"],
}再刪除：
"compilerOptions": {
"types": ["webpack-env"],
}邊踩坑，邊更新。。。
————————————分割線————————————
tsconfig.json配置解釋
{
"compilerOptions": {
"noEmitOnError": true // 編譯的源文件中存在錯誤的時候不再輸出編譯結(jié)果文件
}
}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)移動端的開關(guān)按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
本篇文章主要介紹了vue.js組件之間傳遞數(shù)據(jù)的方法，組件實例的作用域是相互獨立的，如何傳遞數(shù)據(jù)也成了組件的重要知識點之一，有興趣的可以了解一下2017-07-07
這篇文章主要給大家介紹了關(guān)于vue2中watch用法的相關(guān)資料,通過watch監(jiān)聽器,我們可以實時監(jiān)控數(shù)據(jù)的變化,并且在數(shù)據(jù)發(fā)生改變時進(jìn)行相應(yīng)的操作,需要的朋友可以參考下2023-09-09
如何在Vue3中實現(xiàn)自定義指令(超詳細(xì)!)
除了默認(rèn)設(shè)置的核心指令(v-model和v-show),Vue也允許注冊自定義指令,下面這篇文章主要給大家介紹了關(guān)于如何在Vue3中實現(xiàn)自定義指令的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
放大鏡效果在很多購物網(wǎng)站都可以看到，本文主要介紹了vue3實現(xiàn)淘寶放大鏡效果的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
源碼揭秘為什么 Vue2 this 能夠直接獲取到 data 和 methods
本篇文章主要介紹的是Vue2 this 能夠直接獲取到 data 和 methods，閱讀本文將能學(xué)到如何學(xué)習(xí)調(diào)試 vue2 源碼、data 中的數(shù)據(jù)為什么可以用 this 直接獲取到、methods 中的方法為什么可以用 this 直接獲取到,需要的朋友可以參考一下2021-09-09
vue開發(fā)樹形結(jié)構(gòu)組件(組件遞歸)
這篇文章主要為大家詳細(xì)介紹了vue開發(fā)樹形結(jié)構(gòu)組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了vue2中使用AntV?以g2plot為實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue-router實現(xiàn)編程式導(dǎo)航的代碼實例
今天小編就為大家分享一篇關(guān)于vue-router實現(xiàn)編程式導(dǎo)航的代碼實例，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要介紹了Vue中使用的EventBus有生命周期的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07