vue添加typescript方法以问题修复

升级所需要事项

1. 检查你的vue-eslint 是否为 9+版本，否则在启动服务的时候会报错，接下来下载 typescript ts-loader yarn add typescript ts-loader -D ， 如果在安装过程中出现问题，切换到淘宝源进行下载，
2. 下载成功后使用 npx tsc --init 接下来你的项目中会生成 tsconfig.js文件如下所示
3. 此文件为 typescript的配置文件，如果你无法使用此命令行，并且报错的情况，建议配置一下npx，或者尝试使用 tsc --init来进行初始化操作。
4. tsconfig.json的配置如下 ts配置 所示。

{
  // red squiggle line appears here
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": "src",
    // "types": ["webpack-env"],
    "paths": {
      "@/*": ["./*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": ["node_modules"],
  "compileOnSave": false
}

3. 紧接着进行配置你的 vue.config.json 配置 configureWebpack，我的是函数形式，如果你是对象形式可以自行修改

config.module.rules.push({
      test: /.tsx?$/,
      loader: 'ts-loader',
      exclude: /node_modules/,
      options: {
        appendTsSuffixTo: [/.vue$/], // ts-loader
        configFile: path.resolve(__dirname, './tsconfig.json')
      }
    });

4. .eslintrc.js 配置

6. 在src文件夹下创建shims-vue.d.ts 文件，配置为

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

8. 此时，你得所有下载和配置工作已经做完，让我们来解决你可能会遇到的问题

解决问题

1. 

此问题意为typeScript配置文件没有正常的被你的webpack所编译，此问题在网上没有解释，你需要做的是将ts-loader降级，因为在8.2.0以上的版本不再支持web-pack 4 ，降级为8.2.0 然后按照刚才的步骤完整过一遍，查看自己是否有遗漏的地方。

Syntax Error: Error: Debug Failure. False expression: Non-string value passed to `ts.resolveTypeReferenceDirective`, likely by a wrapping package working with an outdated `resolveTypeReferenceDirectives` signature. This is probably not a problem in TS itself

如果你在打包或者启动服务遇到此问题，证明你得typescript的版本过高，需要进行降低成