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

三、（推荐）

在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