使用 babel eslint 解析的 Typescript 强制转换答案

【问题标题】：Typescript casting with babel eslint parsing使用 babel eslint 解析的 Typescript 强制转换
【发布时间】：2020-10-13 13:34:35
【问题描述】：

在将 ESLint 引入现有 Typescript 代码库后，我遇到了一些解析错误。

我已经修复了大部分 lint 错误，但 babel-eslint 作为解析器会抛出很多这样的错误：

  23:32  error  Parsing error: Unexpected token, expected ","

  21 |       return state.set(
  22 |         'callsInProgress',
> 23 |         (state.callsInProgress as any).filter(i => i !== action.payload)
     |                                ^
  24 |       );
  25 |     }
  26 |     case actions.API_RESET: {

我认为这是因为 babel 不理解类型转换 as any。

我如何通过解析器得到这个？

我的 babel 配置如下：

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
  plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-transform-runtime', '@babel/plugin-transform-typescript']
};

【问题讨论】：

旁注：这是type assertion，而不是演员表。断言与强制转换并不完全相同。

标签： typescript babeljs eslint babel-eslint

【解决方案1】：

有一个项目自己使用 babel、eslint 和 typescript。

我建议您停止使用eslint-babel 并改用@typescript-eslint/

typescript-eslint 是一个由 Tslint 的开发者发起的项目（现已弃用）。它完美地 lint typescript 代码。

这是我的 eslint 安装的 npm 包的示例：

"@typescript-eslint/eslint-plugin": "^2.34.0",
"@typescript-eslint/parser": "^2.34.0",
"eslint": "^5.16.0",
"eslint-plugin-import": "^2.21.2",
"eslint-plugin-jsx-a11y": "^6.3.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-react": "^7.20.0",

我的.eslintrc 示例：

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',

  plugins: [
    '@typescript-eslint',
    'eslint-plugin-node',
  ],

  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
  ],

  parserOptions: {
    "ecmaVersion": 2020
  },

  rules: {
    "comma-dangle": ["error", {
      "arrays": "always-multiline",
      "objects": "always-multiline",
      "imports": "always-multiline",
      "exports": "always-multiline",
      "functions": "always-multiline",
    }],
  },

  env: {
    es6: true,
    browser: true,
    node: true,
  },

  parserOptions: {
    project: './tsconfig.json',
    tsconfigRootDir: __dirname,
  },

  globals: {
    "global": false,
    "Promise": false,
  },
};

注意：我不知道eslint-babel 是否可以与@typescript-eslint 兼容，也许可以，您可以同时使用。

【讨论】：

谢谢。这是我目前要去的地方，因为我发现 babel 与仅使用 TypeScript 相比，它的生态系统更难使用。

【解决方案2】：

在经历了从 JavaScript 升级到 TypeScript 之后，我终于同意接受的答案。发布此答案以提供一些额外的关键点。

@babel/eslint-parser（以前的 babel-eslint）可以解析 TS 并让 ESLint 处理 TS。

@babel/eslint-parser 是一个允许 ESLint 在源代码上运行的解析器被 Babel 转换的代码。

@babel/eslint-parser 不能也不能检查 TypeScript 上的类型问题

由于@typescript-eslint 在后台使用 TypeScript，它的规则可以可以识别类型，这是 Babel 没有的能力去做。这个我觉得是TS必备的功能。

见文档：https://github.com/babel/babel/tree/main/eslint/babel-eslint-parser#typescript

所以基本上，如果你的项目是纯 TS 项目，只需使用@typescript-eslint

{
  "plugins": ["@typescript-eslint"],
  "parser": "@typescript-eslint/parser",
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ]
}

如果你的项目既有TS又有JS，你也可以使用@babel/eslint-parser

{
  "parser": "@babel/eslint-parser",
  "extends": ["airbnb", "plugin:prettier/recommended"],
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "jest": true
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
  "rules": {
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ]
  },
  "overrides": [
    {
      "files": ["*.{ts,tsx}"],
      "parser": "@typescript-eslint/parser",
      "plugins": ["@typescript-eslint"],
      "extends": ["plugin:@typescript-eslint/recommended"]
    }
  ]
}

只要明白使用@babel/eslint-parser而不是默认解析器esprima是因为babel可以在一些实验性功能上lint（不多）

【讨论】：

谢谢。我们也有一个混合 JS/TS 代码库（将所有内容缓慢迁移到 TS），并且从未想过要覆盖 TS 文件的解析器。