使用@reduxjs/toolkit+TypeScript执行类型检查时遇TS1005错误

问题现象 #

执行npm run type-check时，TypeScript抛出TS1005错误，提示需要?，错误来自node_modules/reselect/dist/reselect.d.ts文件：

$ npm run type-check

> ts-1005@1.0.0 type-check
> tsc --project tsconfig.json --pretty --noEmit

node_modules/reselect/dist/reselect.d.ts:8:122 - error TS1005: '?' expected.

8 type LongestTuple<ArrayOfTuples extends readonly unknown[][]> = ArrayOfTuples extends [infer FirstArray extends unknown[]] ? FirstArray : ArrayOfTuples extends [
                                                                                                                           ~

node_modules/reselect/dist/reselect.d.ts:11:1 - error TS1005: '?' expected.

11 ] ? LongerOfTwo<FirstArray, LongestTuple<RestArrays>> : never;
   ~


Found 2 errors.

相关配置信息：

• 核心代码仅引入RTK的createSelector：

import { createSelector } from '@reduxjs/toolkit';

• package.json依赖配置：

{
  "name": "ts-1005",
  "scripts": {
    "type-check": "tsc --project tsconfig.json --pretty --noEmit"
  },
  "devDependencies": {
    "typescript": "^4.3.2"
  },
  "dependencies": {
    "@reduxjs/toolkit": "^2.0.1"
  }
}

• tsconfig.json已配置"skipLibCheck": true但未生效：

{
  "compilerOptions": {
    "outDir": "build",
    "module": "esnext",
    "target": "es5",
    "lib": ["es2015", "es2016", "es2017", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "build", "dist"]
}

• @reduxjs/toolkit 2.0.1的peerDependencies未声明TypeScript依赖：

$ npm view @reduxjs/toolkit@2.0.1 peerDependencies
{
  react: '^16.9.0 || ^17.0.0 || ^18',
  'react-redux': '^7.2.1 || ^8.1.3 || ^9.0.0'
}

原因分析 #

@reduxjs/toolkit 2.0.x依赖的reselect版本为5.x，该版本使用了TypeScript 4.4及以上才支持的条件类型推断语法（即infer X extends Type写法），而当前使用的TypeScript 4.3.2不支持该语法，导致类型检查失败。

虽然配置了skipLibCheck: true，但TS 4.3对该配置的处理存在局限性，无法完全跳过嵌套依赖中类型定义的语法检查。

解决方案 #

方案1：升级TypeScript版本 #

将TypeScript升级到4.4及以上版本（推荐升级到4.7+，以更好兼容RTK 2.x的所有特性）：

npm install typescript@^4.7.0 --save-dev

方案2：锁定reselect到兼容TS 4.3的版本 #

如果暂时无法升级TypeScript，可以在package.json中通过overrides（npm 8+）或resolutions（yarn）锁定reselect为4.x版本（该版本不使用TS 4.4+的语法）：

{
  "overrides": {
    "reselect": "^4.1.8"
  }
}

然后重新安装依赖：

npm install

方案3：确认skipLibCheck配置生效 #

删除node_modules和package-lock.json后重新安装依赖，再执行类型检查，确保tsconfig.json中的skipLibCheck配置被正确读取。

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