typescriptredux-toolkitreselect

Got error TS1005: '?' expected when try to run a type check command using TSC


Use @reduxjs/toolkit with typescript, when I try to run the type-check npm script, I get an error:

$ 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.

src/index.ts:

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:

{
  "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"]
}

Not sure why skipLibCheck configuration does not work. Or, @reduxjs/toolkit is incompatible with TS 4.3.2?

I have checked the peer dependencies of RTK 2.0.1, there is no 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'
}

Solution

  • Downgrading the RTK to v1.9.7 solves the problem. You will find it uses "reselect": "^4.1.8" here

    Check package.json:

    "types": "./es/index.d.ts",
    "typesVersions": {
      "<4.2": {
        "*": [
          "./src/legacyTypes/ts4.1/index.d.ts"
        ]
      }
    },
    

    reselect package will use Version selection with typesVersions to figure out which TS type definition files it needs to read.

    On TS version 4.2 and above, it will use ./es/index.d.ts, otherwise, it will use ./src/legacyTypes/ts4.1/index.d.ts

    On TS version 4.2 and above, there is no extends Constraints on infer Type Variables in the v4.1.8/src/types.ts file.

    On TS version <4.2, see below testing:

    enter image description here

    Downgrading the TS to v4.1, Go to the definition for createSelector, and reselect package will use ./src/legacyTypes/ts4.1/index.d.ts as its type definition.

    Run type-check npm script again:

    $ npm run type-check
    
    > type-check
    > tsc --project tsconfig.json --pretty --noEmit
    

    The error is gone.