三、報錯
1. main.ts報錯（ Cannot find module './App.vue'.）
原因： typescript不能識別.vue文件
解決辦法： 引入vue的typescript declare庫
在tsconfig.json中加入
其中，types是自己延伸的一些declare
下面的是vue中的types拓展
改后的tsconfig
{
"exclude": [
"node_modules"
],
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"allowJs": true,
"module": "es2015",
"target": "es5",
"moduleResolution": "node",
"experimentalDecorators": true,
"isolatedModules": true,
"typeRoots": [
"./types",
"./node_modules/vue/types"
],
"lib": [
"es2017",
"dom"
],
"sourceMap": true,
"pretty": true
}
}
2. 在ts的vue中引入js的vue
原因： 問題同上，使用node/vue的types沒起作用
解決辦法： 自己寫一個。上面的tsconfig中。types就是為了讓我們多一些自己的declare。
我是叫index.d.ts，名字隨便起啦
里面寫上
declare module "*.vue" {
import Vue from 'vue'
export default Vue
}
3. 在ts的vue中使用一些vue組件帶來的變量，如element-ui的$message（Property '$message' does not exist on type ...）
原因：缺少typescript類型
解決方法：
this.$message({
type: 'success',
message: '已收藏'
})
拋出錯誤 Property '$message' does not exist on type
一、（推薦）
myThis:any = this
this.myThis.$message({
type: 'success',
message: '已收藏'
})
二、起作用
this['$message']({
type: 'success',
message: '已收藏'
})
三、（推薦）
在types下新建如下目錄結構
目錄結構
/*index.d.ts*/
export declare class MessageParam {
type: string;
message: string
}
export declare interface Message {
(messageParam: MessageParam):void;
}
/*vue.d.ts*/
import Vue = require("vue");
import { Message } from "./index";
declare module "vue/types/vue" {
interface Vue {
$message: Message;
}
}
相當于擴展typescript的declare
4.XMLHttpRequest is not defined
在typescript中，經常要用一些自己從其他js插件中引入的變量。
但直接在ts中寫，ts會報not defined的錯誤
解決辦法： 使用window.XMLHttpRequest
