typescript+vue踩过的坑-常见报错

报错

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: '已收藏'

})