为什么不把项目完全用ts重构？

我手头的项目的基于vue2的，而且项目比较重，重构花费的成本比较高，所以考虑采用渐进式的方式，先将部分代码用ts实现，后期逐渐全面实现TS。

升级过程

安装 typescript ts-loader

修改webpack 配置

  1. // build/webpack.base.conf.js
  2. module.exports = {
  3.   /** 其他与本次改动无关的配置 */
  4.   resolve: {
  5.     /** other code */
  6.     extensions: ['.js', '.vue', '.json', '.ts'], // 添加 .ts 扩展名
  7.   },
  8.    module: {
  9.     rules: [
  10.       /** other code */
  11.       {
  12.         test: /\.tsx?$/,
  13.         use: [
  14.           { loader: 'babel-loader' },
  15.           { 
  16.             loader: 'ts-loader', 
  17.             exclude: /node_modules/, 
  18.             options: {
  19.               transpileOnly: true,
  20.               appendTsSuffixTo: [
  21.                 '\\.vue$'
  22.               ],
  23.               happyPackMode: false
  24.             }
  25.           }
  26.         ]
  27.       }
  28.     ]
  29.   }
  30. }

配置tsconfig

  1. // tsconfig.json
  2. {
  3.   "compilerOptions": {
  4.     "target": "esnext",
  5.     "module": "esnext",
  6.     "strict": true,
  7.     "jsx": "preserve",
  8.     "importHelpers": true,
  9.     "moduleResolution": "node",
  10.     "experimentalDecorators": true,
  11.     "esModuleInterop": true,
  12.     "allowSyntheticDefaultImports": true,
  13.     "sourceMap": true,
  14.     "baseUrl": ".",
  15.     "types": [
  16.       "webpack-env"
  17.     ],
  18.     "paths": {
  19.       "@/*": [
  20.         "src/*"
  21.       ]
  22.     },
  23.     "lib": [
  24.       "esnext",
  25.       "dom",
  26.       "dom.iterable",
  27.       "scripthost"
  28.     ]
  29.   },
  30.   "include": [
  31.     "src/**/*.ts",
  32.     "src/**/*.tsx",
  33.     "src/**/*.vue",
  34.     "tests/**/*.ts",
  35.     "tests/**/*.tsx"
  36.     "src/**/*.js", //  这里需要注意
  37.   ],
  38.   "exclude": [
  39.     "node_modules"
  40.   ],
  41. }

⚠️，上面的配置中 include 李的路径排列顺序会影响ts-loader 识别优先级，
比如在一个文件中引入 一个./tools

如果配置文件中include 中 “src//*.ts”, 排在前面，./tools 会默认寻找 tools.ts 文件
如果”src//*.js” 排在前面 ./tools 会默认寻找 tools.js 文件

参考：https://onlymisaky.gitee.io/2019/12/27/#%E9%85%8D%E7%BD%AE-tsconfig-json