chore: update TypeScript to v6.0

.github/workflows/tests.yml

@@ -138,47 +138,47 @@ jobs:
         include:
           # React 19 × all TS versions
           - node: '24.x'
-            ts: '5.4'
+            ts: '5.5'
             react:
               {
                 version: '^19',
                 types: '^19',
                 react-dom: { version: '^19', types: '^19' },
               }
           - node: '24.x'
-            ts: '5.5'
+            ts: '5.6'
             react:
               {
                 version: '^19',
                 types: '^19',
                 react-dom: { version: '^19', types: '^19' },
               }
           - node: '24.x'
-            ts: '5.6'
+            ts: '5.7'
             react:
               {
                 version: '^19',
                 types: '^19',
                 react-dom: { version: '^19', types: '^19' },
               }
           - node: '24.x'
-            ts: '5.7'
+            ts: '5.8'
             react:
               {
                 version: '^19',
                 types: '^19',
                 react-dom: { version: '^19', types: '^19' },
               }
           - node: '24.x'
-            ts: '5.8'
+            ts: '5.9'
             react:
               {
                 version: '^19',
                 types: '^19',
                 react-dom: { version: '^19', types: '^19' },
               }
           - node: '24.x'
-            ts: '5.9'
+            ts: '6.0'
             react:
               {
                 version: '^19',
@@ -193,17 +193,17 @@ jobs:
                 types: '^19',
                 react-dom: { version: '^19', types: '^19' },
               }
-          # React 18 × boundary TS versions only (5.4, 5.9, next)
+          # React 18 × boundary TS versions only (5.5, 6.0, next)
           - node: '24.x'
-            ts: '5.4'
+            ts: '5.5'
             react:
               {
                 version: '^18',
                 types: '^18',
                 react-dom: { version: '^18', types: '^18' },
               }
           - node: '24.x'
-            ts: '5.9'
+            ts: '6.0'
             react:
               {
                 version: '^18',
@@ -386,9 +386,6 @@ jobs:
         # Sparse matrix: All TS versions with bundler, boundary TS versions with nodenext
         include:
           # bundler × all TS versions
-          - node: '24.x'
-            ts: '5.4'
-            example: { name: 'bundler', moduleResolution: 'Bundler' }
           - node: '24.x'
             ts: '5.5'
             example: { name: 'bundler', moduleResolution: 'Bundler' }
@@ -404,25 +401,28 @@ jobs:
           - node: '24.x'
             ts: '5.9'
             example: { name: 'bundler', moduleResolution: 'Bundler' }
+          - node: '24.x'
+            ts: '6.0'
+            example: { name: 'bundler', moduleResolution: 'Bundler' }
           - node: '24.x'
             ts: 'next'
             example: { name: 'bundler', moduleResolution: 'Bundler' }
-          # nodenext-cjs × boundary TS versions only (5.4, 5.9, next)
+          # nodenext-cjs × boundary TS versions only (5.5, 6.0, next)
           - node: '24.x'
-            ts: '5.4'
+            ts: '5.5'
             example: { name: 'nodenext-cjs', moduleResolution: 'NodeNext' }
           - node: '24.x'
-            ts: '5.9'
+            ts: '6.0'
             example: { name: 'nodenext-cjs', moduleResolution: 'NodeNext' }
           - node: '24.x'
             ts: 'next'
             example: { name: 'nodenext-cjs', moduleResolution: 'NodeNext' }
-          # nodenext-esm × boundary TS versions only (5.4, 5.9, next)
+          # nodenext-esm × boundary TS versions only (5.5, 6.0, next)
           - node: '24.x'
-            ts: '5.4'
+            ts: '5.5'
             example: { name: 'nodenext-esm', moduleResolution: 'NodeNext' }
           - node: '24.x'
-            ts: '5.9'
+            ts: '6.0'
             example: { name: 'nodenext-esm', moduleResolution: 'NodeNext' }
           - node: '24.x'
             ts: 'next'

docs/api/matching-utilities.mdx

@@ -258,7 +258,8 @@ function someFunction(action: PayloadAction<Data>) {
 ```ts title="Using isAnyOf as a type guard"
 import { isAnyOf } from '@reduxjs/toolkit'
 import type { PayloadAction } from '@reduxjs/toolkit'
-import { Data, isSpecial, isInteresting } from '@virtual/matchers' // this is a fake pkg that provides the types shown above
+import type { Data } from '@virtual/matchers' // this is a fake pkg that provides the types shown above
+import { isSpecial, isInteresting } from '@virtual/matchers' // this is a fake pkg that provides the types shown above
 
 const isSpecialOrInteresting = isAnyOf(isSpecial, isInteresting)
 

docs/components/DetailedExplanation.jsx → docs/components/DetailedExplanation.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
+import type { FC, PropsWithChildren } from 'react'
 
-export const DetailedExplanation = ({
+export const DetailedExplanation: FC<PropsWithChildren<{ title?: string }>> = ({
   children,
   title = 'Detailed Explanation',
 }) => {

docs/package.json

@@ -2,7 +2,9 @@
   "name": "docs",
   "devDependencies": {
     "@manaflair/redux-batch": "^1.0.0",
+    "@reduxjs/toolkit": "workspace:^",
     "@types/nanoid": "^2.1.0",
+    "@types/node": "^25.5.0",
     "@types/react": "^19.0.1",
     "async-mutex": "^0.3.2",
     "axios": "^0.20.0",
@@ -12,6 +14,7 @@
     "nanoid": "^3.1.23",
     "next-redux-wrapper": "^7.0.5",
     "redux-persist": "^6.0.0",
-    "rxjs": "^6.6.2"
+    "rxjs": "^6.6.2",
+    "typescript": "^6.0.3"
   }
 }

docs/rtk-query/usage/automated-refetching.mdx

@@ -541,7 +541,7 @@ e.g. `['Post'] / [{ type: 'Post' }]`
 
 Will `invalidate` any `provided` tag with the matching type, including general and specific tags.
 
-Example:  
+Example:
 If a general tag of `Post` was invalidated, endpoints whose data `provided` the following tags would all have their data invalidated:
 
 - `['Post']`
@@ -778,11 +778,11 @@ The example below demonstrates an example with the following behavior:
 
 - Provides an `UNAUTHORIZED` cache tag if a query fails with an error code of `401 UNAUTHORIZED`
 - Provides an `UNKNOWN_ERROR` cache tag if a query fails with a different error
-- Enables a 'login' mutation, which when _successful_, will `invalidate` the data with the `UNAUTHORIZED` tag.  
+- Enables a 'login' mutation, which when _successful_, will `invalidate` the data with the `UNAUTHORIZED` tag.
   This will trigger the `postById` endpoint to re-fire if:
   1. The last call for `postById` had encountered an unauthorized error, and
   2. A component is still subscribed to the cached data
-- Enables a 'refetchErroredQueries' mutation which when _called_, will `invalidate` the data with the `UNKNOWN_ERROR` tag.  
+- Enables a 'refetchErroredQueries' mutation which when _called_, will `invalidate` the data with the `UNKNOWN_ERROR` tag.
   This will trigger the `postById` endpoint to re-fire if:
   1. The last call for `postById` had encountered an unknown error, and
   2. A component is still subscribed to the cached data
@@ -797,7 +797,7 @@ export interface LoginResponse {}
 
 // file: api.ts
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
-import { Post, LoginResponse } from './types'
+import type { LoginResponse, Post } from './types'
 
 const api = createApi({
   baseQuery: fetchBaseQuery({ baseUrl: 'https://example.com' }),

docs/rtk-query/usage/customizing-create-api.mdx

@@ -23,11 +23,11 @@ If you want the hooks to use different versions of `useSelector`, `useDispatch`
 
 ```ts
 import * as React from 'react'
+import type { ReactReduxContextValue } from 'react-redux'
 import {
   createDispatchHook,
   createSelectorHook,
   createStoreHook,
-  ReactReduxContextValue,
 } from 'react-redux'
 import {
   buildCreateApi,

docs/rtk-query/usage/customizing-queries.mdx

@@ -844,7 +844,7 @@ export const { useGetPostsQuery } = api
 
 ```ts title="GraphQL transformation example"
 // file: graphqlBaseQuery.ts noEmit
-import { BaseQueryFn } from '@reduxjs/toolkit/query'
+import type { BaseQueryFn } from '@reduxjs/toolkit/query'
 declare const graphqlBaseQuery: (args: { baseUrl: string }) => BaseQueryFn
 declare const gql: (literals: TemplateStringsArray) => void
 export { graphqlBaseQuery, gql }

docs/rtk-query/usage/migrating-to-rtk-query.mdx

@@ -197,8 +197,8 @@ Below we create a hook to manage sending our request at the appropriate time, as
 
 ```ts title="src/hooks.ts"
 // file: src/services/pokemonSlice.ts noEmit
-import { AsyncThunkAction } from '@reduxjs/toolkit'
-import { RootState } from '../store'
+import type { AsyncThunkAction } from '@reduxjs/toolkit'
+import type { RootState } from '../store'
 interface Pokemon {}
 export declare const fetchPokemonByName: (
   arg: string,
@@ -211,7 +211,7 @@ export const selectDataByName = (state: RootState, name: string) =>
 
 // file: src/store.ts noEmit
 import { useDispatch } from 'react-redux'
-import { EnhancedStore } from '@reduxjs/toolkit'
+import type { EnhancedStore } from '@reduxjs/toolkit'
 interface Pokemon {}
 type RequestState = 'pending' | 'fulfilled' | 'rejected'
 

docs/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "noUnusedLocals": false,
     "noUnusedParameters": false,
     "allowUnusedLabels": true,
@@ -14,7 +14,6 @@
     "target": "ES2020",
     "allowJs": true,
     "checkJs": true,
-    "alwaysStrict": false,
     "baseUrl": "..",
     "jsx": "preserve",
     "traceResolution": false,
@@ -31,6 +30,8 @@
       "your-cool-library": ["docs/virtual/your-cool-library/index.ts"],
       "redux-logger": ["docs/virtual/redux-logger/index.ts"],
       "petstore-api.generated": ["docs/virtual/petstore-api.generated/index.ts"]
-    }
+    },
+    "ignoreDeprecations": "6.0",
+    "noUncheckedSideEffectImports": false
   }
 }

docs/usage/nextjs.mdx

@@ -149,7 +149,7 @@ export const useAppStore = useStore.withTypes<AppStore>()
 
 To use this new `makeStore` function we need to create a new "client" component that will create the store and share it using the React-Redux `Provider` component.
 
-```ts title="app/StoreProvider.tsx"
+```tsx title="app/StoreProvider.tsx"
 // file: lib/store.ts noEmit
 import { configureStore } from '@reduxjs/toolkit'
 
@@ -172,7 +172,8 @@ export type AppDispatch = AppStore['dispatch']
 import { useRef } from 'react'
 import { Provider } from 'react-redux'
 // highlight-start
-import { makeStore, AppStore } from '../lib/store'
+import type { AppStore } from '../lib/store'
+import { makeStore } from '../lib/store'
 // highlight-end
 
 export default function StoreProvider({
@@ -206,7 +207,7 @@ The next step is to **include the `StoreProvider` anywhere in the tree above whe
 
 If you need to initialize the store with data from the parent component, then define that data as a prop on the client `StoreProvider` component and use a Redux action on the slice to set the data in the store as shown below.
 
-```ts title="src/app/StoreProvider.tsx"
+```tsx title="src/app/StoreProvider.tsx"
 // file: lib/features/counter/counterSlice.ts noEmit
 import { createSlice } from '@reduxjs/toolkit'
 import type { PayloadAction } from '@reduxjs/toolkit'
@@ -250,7 +251,8 @@ export type AppDispatch = AppStore['dispatch']
 'use client'
 import { useRef } from 'react'
 import { Provider } from 'react-redux'
-import { makeStore, AppStore } from '../lib/store'
+import type { AppStore } from '../lib/store'
+import { makeStore } from '../lib/store'
 // highlight-start
 import { initializeCount } from '../lib/features/counter/counterSlice'
 // highlight-end
@@ -282,7 +284,7 @@ If you use Next.js's support for client side SPA-style navigation by using `next
 
 Shown below is a `ProductName` example component that uses the Redux store to manage the mutable name of a product. The `ProductName` component is part of a product detail route. In order to ensure that we have the correct name in the store we need to set the value in the store any time the `ProductName` component is initially rendered, which happens on any route change to the product detail route.
 
-```ts title="app/ProductName.tsx"
+```tsx title="app/ProductName.tsx"
 // file: lib/features/product/productSlice.ts noEmit
 import { createSlice } from '@reduxjs/toolkit'
 import type { PayloadAction } from '@reduxjs/toolkit'
@@ -344,10 +346,10 @@ export const useAppStore = useStore.withTypes<AppStore>()
 'use client'
 import { useRef } from 'react'
 import { useAppSelector, useAppDispatch, useAppStore } from '../lib/hooks'
+import type { Product } from '../lib/features/product/productSlice'
 import {
   initializeProduct,
   setProductName,
-  Product,
 } from '../lib/features/product/productSlice'
 
 export default function ProductName({ product }: { product: Product }) {

docs/virtual/matchers/index.ts

@@ -1,8 +1,5 @@
-import {
-  createAsyncThunk,
-  createReducer,
-  PayloadAction,
-} from '@reduxjs/toolkit'
+import type { PayloadAction } from '@reduxjs/toolkit'
+import { createAsyncThunk, createReducer } from '@reduxjs/toolkit'
 
 export interface Data {
   isInteresting: boolean

examples/action-listener/counter/package.json

@@ -12,7 +12,7 @@
     "react-dom": "^19.0.0",
     "react-redux": "^9.1.2",
     "react-scripts": "5.0.1",
-    "typescript": "^5.9.3"
+    "typescript": "^6.0.3"
   },
   "scripts": {
     "start": "react-scripts start",

examples/action-listener/counter/src/react-app-env.d.ts

@@ -1 +1,3 @@
 /// <reference types="react-scripts" />
+
+declare module '*.css' {}

examples/action-listener/counter/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "esnext",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
@@ -10,11 +10,12 @@
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "types": ["node", "jest"]
   },
   "include": ["src"]
 }

examples/publish-ci/cra4/package.json

@@ -51,6 +51,6 @@
     "@types/react-dom": "^18.0.10",
     "prettier": "^3.2.5",
     "serve": "^14.2.0",
-    "typescript": "^5.9.3"
+    "typescript": "^6.0.3"
   }
 }

examples/publish-ci/cra4/src/react-app-env.d.ts

@@ -1 +1,3 @@
 /// <reference types="react-scripts" />
+
+declare module '*.css' {}

examples/publish-ci/cra4/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "esnext",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
@@ -10,11 +10,12 @@
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "node10",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "types": ["node", "jest"]
   },
   "include": ["src"]
 }