vue-cli4.x + Typescript总结

总结下最近一个 Vue CLI 4.x（Vue2）项目 补充 TypeScript 支持的配置。

1. 构建打包

默认情况下，vue-cli不支持ts、tsx文件的解析，直接使用ts编写代码时会报错：找不到loader，好在vue-cli官方支持ts插件，简单安装以下依赖即可。安装完成后，项目打包运行即可支持ts（ts类型错误只会在控制台输出，不会中断程序运行）。

perl 复制代码

"@vue/cli-plugin-typescript": "^4.5.19",
"typescript": "~4.5.0"

@vue/cli-plugin-typescript插件主要做两件事：

会加入ts-loader处理ts文件，并且为了追求效率只做ts->js的语法转换，不做类型检查。
通过ForkTsCheckerWebpackPlugin做类型检查，它运行在一个独立的子进程中。这样可以避免类型检查阻塞主构建流程，从而提升开发体验和构建效率。‌

2. ESlint

安装以下依赖：

perl 复制代码

"@babel/eslint-parser": "^7.28.5",
"@babel/preset-typescript": "^7.28.5",
"eslint": "6.7.2",
"eslint-plugin-vue": "6.2.2",

因为是补充ts，没打算做严格的ts校验，并且如果使用完善的ts支持的话需要对eslint及其关联的包大升级，风险较大。所以这里采用@babel/eslint-parser和@babel/preset-typescript这对组合，只是 把 TS 编译成 JS，不理解类型，不提供 TS lint 支持 。

如果需要正常解析 TypeScript 并应用 TypeScript 规则，可以使用@typescript-eslint/parser和@typescript-eslint/eslint-plugin配置。下面简单介绍下两种方案的区别：

功能	@typescript-eslint/parser + plugin	@babel/eslint-parser + @babel/preset-typescript
能否解析 TypeScript 语法	✔ 完整支持	✔ 支持（但有限制）
能否基于 TypeScript 类型做 lint（如 no-unused-vars, no-implicit-any 等）	⭐ 支持（独家）	❌ 不支持
是否需要 tsconfig.json	✔ 会读取（可理解类型）	❌ 不读取
是否能报告类型错误	✔ 可用 `parserOptions.project` 开启	❌ 完全不能
是否支持所有 TS 特性（enum / namespace / overload）	✔ 100%	❌ 部分不支持
速度	较慢（读 tsconfig + 类型分析）	快（不处理类型）
适用于生产项目	✔ TypeScript 官方推荐	⚠ 仅适合"Babel-only TS 项目"

@babel/eslint-parser和@babel/preset-typescript方案eslint重点配置：

yaml 复制代码

parser: 'vue-eslint-parser',
parserOptions: {
  parser: '@babel/eslint-parser',
  requireConfigFile: false,
  babelOptions: {
    presets: ['@babel/preset-typescript'],
    // 需加上，否则eslint无法SFC里的ts语法
    parserOpts: {
      plugins: ['typescript'],
    },
  },
},