Vue中使用TypeScript尖括号类型转换触发ESLint错误如何解决

问题原因 #

这个报错的根源是Vue单文件组件中的类HTML语法，和TypeScript的尖括号类型断言语法产生了歧义，ESLint解析器默认会把<HTMLInputElement>这类尖括号内容识别为HTML标签，所以解析失败抛出错误。

解决方案 #

如果坚持要使用尖括号类型断言语法，可以通过以下两步配置消除报错：

1. 修改ESLint配置文件（通常是项目根目录的.eslintrc.cjs或.eslintrc.json），指定使用TS专用解析器并开启JSX解析支持：

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true // 开启后尖括号断言会被识别为TS语法，不会被当成HTML标签解析
    }
  }
}

2. 修改tsconfig.json的编译配置，避免TypeScript本身抛出语法错误：

{
  "compilerOptions": {
    "jsx": "preserve"
  }
}

注意：TypeScript官方更推荐使用as语法做类型断言，该语法不存在和HTML/JSX标签的歧义问题，不需要额外配置就能在所有TS场景下正常使用，适配性更强。

内容的提问来源于stack exchange，提问作者Théo Lavaux