Vue3+TS 常见报错

2,924 阅读1分钟

ts无法识别.vue文件

终端提示can‘t find module './App.vue'

原因是ts不能识别.vue 为后缀的文件

解决方法: 引入ts的声明文件,在声明文件中对vue进行声明

   1)创建shims-vue.d.ts 只要是以 后缀 .d.ts结尾即可 

   2)在shims-vue.d.ts 中声明文件

/** * shims-vue.d.ts的作用 
* 是为了typescript做的适配定义文件,因为.vue文件不是一个常规的文件类型,ts是不能理解vue文件是干嘛的, 
* 加这一段是告诉ts,vue文件是这种类型的。 
* 这一段删除,会发现import的所有vue类型的文件都会报错。 
*/
declare module '*.vue' {  
    import Vue from 'vue'  
    export default Vue
}

ts项目中无法找到.ts文件

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "useDefineForClassFields": true,
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": "./",
    "paths": {
      "@": ["src"],
      "@/*": ["src/*"]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "*.ts"
  ],
  "references": [{ "path": "./tsconfig.node.json" }]
}

或者是 这样是多级选目录时不报错

"src/**/*.ts",

有时候还会有xxx.ts这样 就必须加

  "*.ts"

Vue+ts项目导入Js文件方法

在 tsconfig.json文件里修改include

"compilerOptions": {
    "noImplicitAny": false,    // 不进行any语法检查
     "allowJs": true,    // 允许js
}
"include": [    "src/**/*.js",  // 导入js
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx",
    "public/config.js"  // 导入js
],

在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

1.

myThis:any = this
    this.myThis.$message({
    type: 'success',
    message: '已收藏'
})

XMLHttpRequest is not defined

在typescript中,经常要用一些自己从其他js插件中引入的变量。

但直接在ts中写,ts会报not defined的错误

使用window.XMLHttpRequest

任何时候在ts代码里声明一个变量的时候都要加声明变量的类型 否则会报错

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