vue2引用typeScript的步骤

笔者在webpack+vue2中引入ts走过了各种坑，花费了不少时间，故写下这个笔记，希望能帮到有需要的朋友

1. 安装ts的依赖

npm i ts-loader typescript --save-dev

2. 在根目录下新增tsconfig.json(与package.json同级)。内容可参考如下

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "moduleResolution": "node",
    "lib": ["dom","es2016"],
    "baseUrl": "./", 
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "src/**/*.d.ts"
  ],
  "exclude": ["node_modules"] 
}

3. webpack引入ts-loader。我用的是vue-cli脚手架，直接在vue.config.js中引入ts-loader。引入ts-loader的方式不是唯一，我在这给出两种方式
第一种方式 在configWebpack中引入

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: 'ts-loader',
          exclude: /node_modules/,
          options: {
            appendTsSuffixTo: [/\.vue$/],
          }
        }
      ]
    }
  }
}

第二种方式 在chainWebpack中引入

module.exports = {
  chainWebpack(config) {
    config.module
      .rule('tsx')
      .test(/\.tsx?$/)
      .use('ts-loader')
        .loader('ts-loader')
        .options({
          appendTsSuffixTo: [/\.vue$/],   
        })
        .tap(options => {
          // 修改它的选项...
          return options
        })
   }
}

4. 到这里就可以直接运行项目了

报错汇总

当然，你会发现还是有报错，下面是我碰到的报错，提供大家参考
1. Syntax Error: TypeError: loaderContext.getOptions is not a function。这是因为ts-loader的版本过高了，可以降低一下

npm i ts-loader@8.2.0 --save-dev

2. Syntax Error: Error: error while parsing tsconfig.json。这是因为监测不到ts文件，在src下的任意文件夹下新建一个ts文件即可

3. TS2307: Cannot find module ‘./xxx.vue’ or its corresponding type declarations。引用自己写的vue文件报错，可能是因为引用的vue文件的脚本没有使用ts，在script头标签加入lang="ts"即可

还有其他问题可以留言，大家一起学习探讨