報錯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