chore: update TypeScript to v6.0

- Update TypeScript version to [v6.0](https://devblogs.microsoft.com/typescript/announcing-typescript-6-0).
- Raise the minimum supported TypeScript version to [v5.5](https://devblogs.microsoft.com/typescript/announcing-typescript-5-5) (drop `5.0`-`5.4`).

Author: aryaemami59

.github/workflows/test.yaml

@@ -119,7 +119,7 @@ jobs:
       fail-fast: false
       matrix:
         node: ['24.x']
-        ts: ['5.5', '5.6', '5.7', '5.8']
+        ts: ['5.5', '5.6', '5.7', '5.8', '5.9', '6.0']
     steps:
       - name: Checkout repo
         uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1

docs/components/DetailedExplanation.jsx docs/components/DetailedExplanation.tsxdocs/components/DetailedExplanation.jsx renamed to 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

@@ -1,7 +1,10 @@
 {
   "devDependencies": {
     "@reduxjs/toolkit": "^2.0.1",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^25.9.3",
     "@vitest/browser-playwright": "^4.0.5",
     "msw": "^2.0.0",
     "react": "^18.2.0",

docs/tutorials/essentials/part-3-data-flow.md

@@ -508,7 +508,8 @@ When we write the `postAdded` reducer function, `createSlice` will automatically
 ```ts title="features/posts/postsSlice.ts"
 // highlight-start
 // Import the `PayloadAction` TS type
-import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import type { PayloadAction } from '@reduxjs/toolkit'
+import { createSlice } from '@reduxjs/toolkit'
 // highlight-end
 
 // omit initial state
@@ -572,7 +573,8 @@ import { nanoid } from '@reduxjs/toolkit'
 
 import { useAppDispatch } from '@/app/hooks'
 
-import { type Post, postAdded } from './postsSlice'
+import type { Post } from './postsSlice'
+import { postAdded } from './postsSlice'
 // highlight-end
 
 // omit form types

docs/tutorials/essentials/part-4-using-data.md

@@ -215,7 +215,8 @@ Given all those requirements, here's how our `postsSlice` definition should look
 
 ```ts title="features/posts/postsSlice.ts"
 // highlight-next-line
-import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import type { PayloadAction } from '@reduxjs/toolkit'
+import { createSlice } from '@reduxjs/toolkit'
 
 // omit state types
 
@@ -599,7 +600,8 @@ You can't have a "social media" app if there aren't any other people involved! L
 Since the concept of "users" is different than the concept of "posts", we want to keep the code and data for the users separated from the code and data for posts. We'll add a new `features/users` folder, and put a `usersSlice` file in there. Like with the posts slice, for now we'll add some initial entries so that we have data to work with.
 
 ```ts title="features/users/usersSlice.ts"
-import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import type { PayloadAction } from '@reduxjs/toolkit'
+import { createSlice } from '@reduxjs/toolkit'
 
 import type { RootState } from '@/app/store'
 
@@ -926,7 +928,8 @@ Then, we can define a new reducer that will handle updating the reaction count f
 Like with editing posts, we need to know the ID of the post, and which reaction button the user clicked on. We'll have our `action.payload` be an object that looks like `{id, reaction}`. The reducer can then find the right post object, and update the correct reactions field.
 
 ```ts title="features/posts/postsSlice.ts"
-import { createSlice, nanoid, PayloadAction } from '@reduxjs/toolkit'
+import type { PayloadAction } from '@reduxjs/toolkit'
+import { createSlice, nanoid } from '@reduxjs/toolkit'
 import { sub } from 'date-fns'
 
 // highlight-start
@@ -1066,7 +1069,8 @@ The first step is to create the `authSlice` and add it to the store. This is the
 In this case, our auth state is really just the current logged-in username, and we'll reset it to `null` if they log out.
 
 ```ts title="features/auth/authSlice.ts"
-import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import type { PayloadAction } from '@reduxjs/toolkit'
+import { createSlice } from '@reduxjs/toolkit'
 
 interface AuthState {
   username: string | null
@@ -1346,6 +1350,7 @@ export const AddPostForm = () => {
 
     e.currentTarget.reset()
   }
+}
 ```
 
 Finally, it also doesn't make sense to allow the current user to edit posts defined by _other_ users. We can update the `<SinglePostPage>` to only show an "Edit Post" button if the post author ID matches the current user ID:
@@ -1436,7 +1441,8 @@ You can chain these together, like `builder.addCase().addCase().addMatcher().add
 Given that, we can import the `userLoggedOut` action from `authSlice.ts` into `postsSlice.ts`, listen for that action inside of `postsSlice.extraReducers`, and return an empty posts array to reset the posts list on logout:
 
 ```ts title="features/posts/postsSlice.ts"
-import { createSlice, nanoid, PayloadAction } from '@reduxjs/toolkit'
+import type { PayloadAction } from '@reduxjs/toolkit'
+import { createSlice, nanoid } from '@reduxjs/toolkit'
 import { sub } from 'date-fns'
 
 // highlight-next-line

docs/tutorials/essentials/part-5-async-logic.md

@@ -229,7 +229,8 @@ If you're writing a thunk by hand, you can explicitly type the thunk arguments a
 
 ```ts title="app/store.ts"
 // highlight-next-line
-import { Action, ThunkAction, configureStore } from '@reduxjs/toolkit'
+import type { Action, ThunkAction } from '@reduxjs/toolkit'
+import { configureStore } from '@reduxjs/toolkit'
 
 // omit actual store setup
 
@@ -408,7 +409,8 @@ Redux Toolkit's `createAsyncThunk` API generates thunks that automatically dispa
 Let's start by adding a thunk that will make an HTTP request to retrieve a list of posts. We'll import the `client` utility from the `src/api` folder, and use that to make a request to `'/fakeApi/posts'`.
 
 ```ts title="features/posts/postsSlice.ts"
-import { createSlice, nanoid, PayloadAction } from '@reduxjs/toolkit'
+import type { PayloadAction } from '@reduxjs/toolkit'
+import { createSlice, nanoid } from '@reduxjs/toolkit'
 // highlight-next-line
 import { client } from '@/api/client'
 
@@ -659,12 +661,8 @@ import { TimeAgo } from '@/components/TimeAgo'
 
 import { PostAuthor } from './PostAuthor'
 import { ReactionButtons } from './ReactionButtons'
-import {
-  Post,
-  selectAllPosts,
-  selectPostsError,
-  fetchPosts
-} from './postsSlice'
+import type { Post } from './postsSlice'
+import { fetchPosts, selectAllPosts, selectPostsError } from './postsSlice'
 
 interface PostExcerptProps {
   post: Post
@@ -891,7 +889,8 @@ This is because the post entries are being randomly generated by the fake API se
 Like last time, we'll create another async thunk to get the users from the API and return them, then handle the `fulfilled` action in the `extraReducers` slice field. We'll skip worrying about loading state for now:
 
 ```ts title="features/users/usersSlice.ts"
-import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import type { PayloadAction } from '@reduxjs/toolkit'
+import { createSlice } from '@reduxjs/toolkit'
 
 // highlight-next-line
 import { client } from '@/api/client'

docs/tutorials/essentials/part-6-performance-normalization.md

@@ -265,6 +265,8 @@ export const Navbar = () => {
       // highlight-next-line
       dispatch(logout())
     }
+  }
+}
 ```
 
 ```tsx title="features/auth/LoginPage.tsx"
@@ -293,14 +295,14 @@ export const LoginPage = () => {
     await dispatch(login(username))
     navigate('/posts')
   }
-
 ```
 
 Since the `userLoggedOut` action creator was being used by the `postsSlice`, we can update that to listen to `logout.fulfilled` instead:
 
 ```ts title="features/posts/postsSlice.ts"
-import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit'
 import { client } from '@/api/client'
+import type { PayloadAction } from '@reduxjs/toolkit'
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
 
 import type { RootState } from '@/app/store'
 
@@ -1052,7 +1054,7 @@ We're going to need to import `createEntityAdapter`, create an instance that has
 import {
   // highlight-start
   createEntityAdapter,
-  EntityState
+  type EntityState
   // highlight-end
   // omit other imports
 } from '@reduxjs/toolkit'
@@ -1504,18 +1506,17 @@ Now we can go add a listener that will watch for the `addNewPost.fulfilled` acti
 There's [multiple approaches we can use for defining listeners in our codebase](https://redux-toolkit.js.org/api/createListenerMiddleware#organizing-listeners-in-files). That said, it's usually a good practice to define listeners in whatever slice file seems most related to the logic we want to add. In this case, we want to show a toast when a post gets added, so let's add this listener in the `postsSlice` file:
 
 ```ts title="features/posts/postsSlice.ts"
+import type { EntityState, PayloadAction } from '@reduxjs/toolkit'
 import {
   createEntityAdapter,
   createSelector,
-  createSlice,
-  EntityState,
-  PayloadAction
+  createSlice
 } from '@reduxjs/toolkit'
 import { client } from '@/api/client'
 
 import type { RootState } from '@/app/store'
 // highlight-next-line
-import { AppStartListening } from '@/app/listenerMiddleware'
+import type { AppStartListening } from '@/app/listenerMiddleware'
 import { createAppAsyncThunk } from '@/app/withTypes'
 
 // omit types, initial state, slice definition, and selectors

docs/tutorials/essentials/part-7-rtk-query-basics.md

@@ -26,10 +26,10 @@ import { DetailedExplanation } from '../../components/DetailedExplanation'
 If you prefer a video course, you can [watch this RTK Query video course by Lenz Weber-Tronic, the creator of RTK Query, for free at Egghead](https://egghead.io/courses/rtk-query-basics-query-endpoints-data-flow-and-typescript-57ea3c43?af=7pnhj6) or take a look at the first lesson right here:
 
 <div style={{position:"relative",paddingTop:"56.25%"}}>
-  <iframe 
-    src="https://app.egghead.io/lessons/redux-course-introduction-and-application-walk-through-for-rtk-query-basics/embed?af=7pnhj6" 
+  <iframe
+    src="https://app.egghead.io/lessons/redux-course-introduction-and-application-walk-through-for-rtk-query-basics/embed?af=7pnhj6"
     title="RTK Query Video course at Egghead: Course Introduction and Application Walk through for RTK Query Basics"
-    frameborder="0" 
+    frameborder="0"
     allowfullscreen
     style={{position:"absolute",top:0,left:0,width:"100%",height:"100%"}}
   ></iframe>
@@ -287,7 +287,8 @@ import { Spinner } from '@/components/Spinner'
 import { TimeAgo } from '@/components/TimeAgo'
 
 // highlight-next-line
-import { useGetPostsQuery, Post } from '@/features/api/apiSlice'
+import type { Post } from '@/features/api/apiSlice'
+import { useGetPostsQuery } from '@/features/api/apiSlice'
 
 import { PostAuthor } from './PostAuthor'
 import { ReactionButtons } from './ReactionButtons'
@@ -479,7 +480,7 @@ export const SinglePostPage = () => {
   const currentUsername = useAppSelector(selectCurrentUsername)
   // highlight-next-line
   const { data: post, isFetching, isSuccess } = useGetPostQuery(postId!)
-  
+
   // highlight-next-line
   let content: React.ReactNode
 
@@ -508,7 +509,7 @@ export const SinglePostPage = () => {
       </article>
     )
   }
-  
+
   // highlight-next-line
   return <section>{content}</section>
 }
@@ -729,7 +730,8 @@ Instead, we could make the existing list of posts partially transparent to indic
 // highlight-next-line
 import classnames from 'classnames'
 
-import { useGetPostsQuery, Post } from '@/features/api/apiSlice'
+import type { Post } from '@/features/api/apiSlice'
+import { useGetPostsQuery } from '@/features/api/apiSlice'
 
 // omit other imports and PostExcerpt
 

docs/tutorials/essentials/part-8-rtk-query-advanced.md

@@ -119,7 +119,7 @@ export const EditPostForm = () => {
 
   // highlight-start
   const onSavePostClicked = async (
-  // highlight-end
+    // highlight-end
     e: React.FormEvent<EditPostFormElements>
   ) => {
     // Prevent server submission
@@ -260,11 +260,16 @@ Fortunately, this is simple to fix. RTK Query actually uses `createAsyncThunk` i
 Currently, the toast listener is watching for the single specific action type with `actionCreator: addNewPost.fulfilled`. We'll update it to watch for the posts being added with `matcher: apiSlice.endpoints.addNewPost.matchFulfilled`:
 
 ```ts title="features/posts/postsSlice.ts"
-import { createEntityAdapter, createSelector, createSlice, EntityState, PayloadAction } from '@reduxjs/toolkit'
+import type { EntityState, PayloadAction } from '@reduxjs/toolkit'
+import {
+  createEntityAdapter,
+  createSelector,
+  createSlice
+} from '@reduxjs/toolkit'
 import { client } from '@/api/client'
 
 import type { RootState } from '@/app/store'
-import { AppStartListening } from '@/app/listenerMiddleware'
+import type { AppStartListening } from '@/app/listenerMiddleware'
 import { createAppAsyncThunk } from '@/app/withTypes'
 
 // highlight-next-line
@@ -277,7 +282,9 @@ export const addPostsListeners = (startAppListening: AppStartListening) => {
   startAppListening({
     // highlight-next-line
     matcher: apiSlice.endpoints.addNewPost.matchFulfilled,
-    effect: async (action, listenerApi) => {
+    effect: async (action, listenerApi) => {}
+  })
+}
 ```
 
 Now the toast should show correctly again when we add a post.
@@ -550,7 +557,7 @@ import {
   createSelector,
   // highlight-start
   createEntityAdapter,
-  EntityState
+  type EntityState
   // highlight-end
 } from '@reduxjs/toolkit'
 
@@ -660,7 +667,8 @@ import type { TypedUseQueryStateResult } from '@reduxjs/toolkit/query/react'
 import { useAppSelector } from '@/app/hooks'
 
 // highlight-next-line
-import { useGetPostsQuery, Post } from '@/features/api/apiSlice'
+import type { Post } from '@/features/api/apiSlice'
+import { useGetPostsQuery } from '@/features/api/apiSlice'
 
 import { selectUserById } from './usersSlice'
 
@@ -951,7 +959,7 @@ Similar to `onQueryStarted`, `onCacheEntryAdded` receives two parameters. The fi
 There's also two additional Promises that can be waited on:
 
 - `cacheDataLoaded`: resolves with the first cached value received, and is typically used to wait for an actual value to be in the cache before doing more logic
-- `cacheEntryRemoved `: resolves when this cache entry is removed (i.e, there are no more subscribers and the cache entry has been garbage-collected)
+- `cacheEntryRemoved`: resolves when this cache entry is removed (i.e, there are no more subscribers and the cache entry has been garbage-collected)
 
 As long as 1+ subscribers for the data are still active, the cache entry is kept alive. When the number of subscribers goes to 0 and the cache lifetime timer expires, the cache entry will be removed, and `cacheEntryRemoved` will resolve. Typically, the usage pattern is:
 
@@ -1397,7 +1405,6 @@ const notificationsSlice = createSlice({
     }
   },
 })
-
 ```
 
 When the cache entry is added, we create a new `WebSocket` instance that will connect to the mock server backend.

docs/tutorials/typescript.md

@@ -92,7 +92,8 @@ All generated actions should be defined using the `PayloadAction<T>` type from R
 You can safely import the `RootState` type from the store file here. It's a circular import, but the TypeScript compiler can correctly handle that for types. This may be needed for use cases like writing selector functions.
 
 ```ts title="features/counter/counterSlice.ts"
-import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import type { PayloadAction } from '@reduxjs/toolkit'
+import { createSlice } from '@reduxjs/toolkit'
 import type { RootState } from '../../app/store'
 
 // highlight-start