Vue3+Ts各种错误整理

Posted 2022-08-17 UsherYue

解决 Vue3项目编译出现 Could not find a declaration file for module 'module-name'. '/path/to/module-name.js' implicitly has an 'any' type

npm install typescript

npm install @vue/cli-plugin-typescript

tsc init 

package.json增加eslint配置

"eslintConfig": 
    "root": true,
    "env": 
      "node": true
    ,
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended",
      "@vue/typescript/recommended"
    ],
    "parserOptions": 
      "ecmaVersion": 2020
    ,
    "rules": 
      "@typescript-eslint/semi": "off",
      "@typescript-eslint/camelcase": "off",
      "@typescript-eslint/no-explicit-any": ["off"],
      "@typescript-eslint/no-unused-vars": ["off"],
      "@typescript-eslint/no-non-null-assertion": ["off"]
    
  


并修改tsconfig.js 内容为如下:


  "compilerOptions": 
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": 
      "@/*": [
        "src/*"
      ]
    ,
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  ,
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]



创建shims-vue.d.js 一定要放在src目录下

/* eslint-disable */
declare module '*.vue' 
    import type  DefineComponent  from 'vue'
    const component: DefineComponent<, , any>
    export default component