TypeScript元组触发ESLint解析错误：Cannot read properties of undefined (reading 'map')

编写以下TypeScript代码时触发ESLint解析错误：

const d: [number, number] = [1, 2];

错误信息：Parsing error: Cannot read properties of undefined (reading 'map')

环境配置信息 #

package.json devDependencies #

"devDependencies": {
    "@types/es6-promise": "^3.3.0",
    "@types/express": "^4.11.1",
    "@types/mongodb": "^3.5.27",
    "@types/node": "^12.20.6",
    "@types/socket.io": "^1.4.38",
    "@typescript-eslint/eslint-plugin": "^2.34.0",
    "@typescript-eslint/parser": "^2.34.0",
    "cpx": "^1.5.0",
    "del-cli": "^1.1.0",
    "empty-folder": "^2.0.1",
    "eslint": "^6.3.0",
    "json-schema-to-typescript": "^11.0.1",
    "nodemon": "^1.17.4",
    "npm-run": "^5.0.1",
    "rimraf": "^3.0.1",
    "tsconfig-paths": "^4.0.0",
    "typescript": "^4.2.3"
  },

.eslintrc.js #

module.exports = {
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint"],
  extends: ["plugin:@typescript-eslint/recommended"],
  rules: {
    // note you must disable the base rule as it can report incorrect errors
    indent: "off",
    "@typescript-eslint/indent": ["error", 2],
    "@typescript-eslint/explicit-function-return-type": [0],
    "@typescript-eslint/no-explicit-any": [0],
    "@typescript-eslint/no-unused-vars": [0],
    "@typescript-eslint/camelcase": [0],
    "@typescript-eslint/no-namespace": [0],
    "@typescript-eslint/no-empty-interface": [
      "error",
      {
        allowSingleExtends: true
      }
    ],
    "no-multiple-empty-lines": [
      "error",
      {
        max: 1,
        maxEOF: 1,
        maxBOF: 0
      }
    ],
    "no-var": "error",
    "newline-before-return": "error",
    semi: [2],
    "padding-line-between-statements": [
      "error",
      { blankLine: "always", prev: "*", next: "if" },
      { blankLine: "always", prev: "*", next: "for" },
      { blankLine: "always", prev: "*", next: "switch" },
      { blankLine: "always", prev: "*", next: "while" },
      { blankLine: "always", prev: "*", next: "break" },
      { blankLine: "always", prev: "*", next: "try" }
    ],
    "comma-dangle": ["error", "never"]
  }
};

原因及解决方法 #

核心原因：依赖版本不兼容 #

项目中存在明显的版本匹配问题：

• @typescript-eslint/parser 和 @typescript-eslint/eslint-plugin 为 2.34.0（属于v2分支）
• eslint 为 6.3.0
• typescript 为 4.2.3

@typescript-eslint v2.x 仅对 TypeScript 3.x 提供完善支持，对 TypeScript 4.x 的元组等新语法解析逻辑存在bug，会触发这类Cannot read properties of undefined的报错。同时v2.x与ESLint 6.x虽兼容，但版本组合的稳定性不足。

解决步骤 #

1. 统一升级依赖版本
   推荐升级到匹配的稳定版本组合，比如：

   • 方案1（保留ESLint 6.x）：降级TypeScript到3.x版本，确保与@typescript-eslint v2.x兼容
   • 方案2（更推荐）：升级ESLint到7.x，同时将@typescript-eslint相关包升级到v3.x，执行命令：

     npm install eslint@7.x @typescript-eslint/eslint-plugin@3.x @typescript-eslint/parser@3.x --save-dev
     

   若想长期维护，可直接升级到更现代的版本组合（如ESLint 8.x + @typescript-eslint 5.x/6.x），只要保证三者版本匹配即可。

2. 优化ESLint配置
   在.eslintrc.js中添加parserOptions.project关联tsconfig，提升解析精度：

   module.exports = {
     parser: "@typescript-eslint/parser",
     parserOptions: {
       project: "./tsconfig.json",
       ecmaVersion: 2020
     },
     plugins: ["@typescript-eslint"],
     extends: ["plugin:@typescript-eslint/recommended"],
     // 其他规则保持不变
   };
   

3. 清理依赖缓存
   执行以下命令清除残留的版本冲突：

   rm -rf node_modules package-lock.json
   npm install
   

内容的提问来源于stack exchange，提问作者mr_robot