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'
}
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:
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.