Fix: TypeScript Type Portability Issues

[aryaemami59]

Overview

The type portability issues in this repository are primarily caused by three specific TypeScript errors:

1. TS4023: Exported variable 'useAppDispatch' has or is using name 'TimeResponse' from external module "/home/runner/work/redux-toolkit/redux-toolkit/examples/publish-ci/vite/src/app/services/times" but cannot be named.

   • Solution: This one can actually be resolved quite often by converting the problematic type from an interface to a type alias. Other times we might have to export the problematic type.

2. TS2742: The inferred type of 'useGetQuotesQuery' cannot be named without a reference to '../../../node_modules/@reduxjs/toolkit/dist/query/react/buildHooks'. This is likely not portable. A type annotation is necessary.

   • Solution: Bundling the type definitions seems to have resolved this issue.

3. TS2527: The inferred type of 'quotesApiSlice' references an inaccessible 'unique symbol' type. A type annotation is necessary.
   This one took a while for me to figure out, It turns out in order for a unique symbol type to be "accessible", the unique symbol has to be imported upon declaration, so we want something that looks like this:

   export declare const coreModuleName: unique symbol

   But dts-rollup-plugin gives us this instead:

   declare const coreModuleName: unique symbol
   export { coreModuleName }

   But TypeScript treats declare const coreModuleName: unique symbol and export { coreModuleName }; as 2 different unique symbols because each reference to coreModuleName is completely unique.

   • Solution: While somewhat hacky, I wrote a small script that takes all exported unique symbols and converts them from:

     declare const coreModuleName: unique symbol
     export { coreModuleName }

     To:

     export declare const coreModuleName: unique symbol

This PR:

• Resolves:

  • The inferred type of 'X' cannot be named without a reference to '@reduxjs/toolkit/node_modules/immer/dist/internal'. This is likely not portable. A type annotation is necessary. #1806
  • FakeBaseQuery references an inaccessible 'unique symbol' type.  #2314
  • Support for Typescript Node16 Module Resolution (RTK-Query & RTK-Query/React) #2485
  • (RTK Alpha 2): Cannot resolve types when moduleResolution is set to node16 #3202
  • [RTK v2.0]: Function createApi Types are not Portable #3568
  • Type error: The inferred type of 'configureStore' cannot be named without a reference to '@reduxjs/toolkit/node_modules/redux'. This is likely not portable. A type annotation is necessary. #3962
  • Error with tsc when attempting to import types from RTK Query using @reduxjs/toolkit 2.0.1 #3970
  • The inferred type of [...] cannot be named without a reference to [...] buildHooks.js #3983
  • Typescript errors using Node ESM module resolution and "declaration: true" #4066
  • ReducerWithInitialState is not portlable according to TS #4108
  • Export DraftableEntityState, IsAny, UseQuery and other types #4401
  • [TS2742] The inferred type of '...' cannot be named without a reference to ... #4448
  • UpdateDefinitions type not exported from @reduxjs/toolkit/dist/query/endpointDefinitions #4492
  • The inferred type of 'useLatestProductsQuery' cannot be named without a reference to '../../../node_modules/@reduxjs/toolkit/dist/query/react/buildHooks'. This is likely not portable. A type annotation is necessary. How to resolve this error?  #4498
  • tsconfig.json composite: true cause some types errors #4518

• Converts the following types from interface to type alias:

  • AsyncThunkSliceReducerConfig
  • ReducerDefinition
  • AsyncThunkSliceReducerDefinition
  • MutationTypes
  • MutationThunkArg
  • MutationCacheLifecycleApi
  • MutationLifecycleApi
  • BaseEndpointTypes
  • CacheLifecyclePromises
  • MutationBaseLifecycleApi
  • QueryLifecyclePromises
  • LifecycleApi
  • PromiseWithKnownReason
  • QueryTypes
  • StartQueryActionCreatorOptions
  • QueryThunkArg
  • UseQuerySubscriptionOptions
  • GetSelectorsOptions
  • EndpointDefinitionWithQueryFn
  • EndpointDefinitionWithQuery
  • BaseActionCreator
  • WithMiddleware
  • ReactDynamicMiddlewareInstance
  • AddListenerOverloads
  • TypedActionCreatorWithMatchFunction
  • TypedActionCreator
  • CaseReducerDefinition
  • InjectIntoConfig
  • InjectedSlice
  • QueryHooks
  • MutationHooks
  • ThunkWithReturnValue

• Exports the following types:

  • StartQueryActionCreatorOptions
  • CombinedSliceReducer
  • BaseEndpointDefinition
  • AddMiddleware
  • CreateDispatchWithMiddlewareHook
  • DynamicDispatch

• Exports the following values:

  • UNINITIALIZED_VALUE
  • _NEVER

• Removes relative declare module statements.

• Fixes issues related to name collision of types. Sometimes tsup has a hard time with aliasing type imports so if we have something like this:

  import type { Dispatch as ReduxDispatch } from 'redux'

  tsup somehow renames ReduxDispatch back to Dispatch which causes issues when you have a generic type parameter with the same name so this:

  export type AddMiddleware<
    State = any,
    Dispatch extends ReduxDispatch<UnknownAction> = ReduxDispatch<UnknownAction>
  > = {
    (...middlewares: Middleware<any, State, Dispatch>[]): void
    withTypes<MiddlewareConfig extends MiddlewareApiConfig>(): AddMiddleware<
      GetState<MiddlewareConfig>,
      GetDispatch<MiddlewareConfig>
    >
  }

  Becomes:

  export type AddMiddleware<
    State = any,
    Dispatch extends Dispatch<UnknownAction> = Dispatch<UnknownAction>
  > = {
    (...middlewares: Middleware<any, State, Dispatch>[]): void
    withTypes<MiddlewareConfig extends MiddlewareApiConfig>(): AddMiddleware<
      GetState<MiddlewareConfig>,
      GetDispatch<MiddlewareConfig>
    >
  }

  Which can cause issues as well as make things confusing. This issue is fixed by doing 2 things:

  1. Renaming some generic type parameters to prevent name collision with imported external types:

     export type AddMiddleware<
       State = any,
     - Dispatch extends ReduxDispatch<UnknownAction> = ReduxDispatch<UnknownAction>,
     + DispatchType extends ReduxDispatch<UnknownAction> = ReduxDispatch<UnknownAction>,
       > = {
      (...middlewares: Middleware<any, State, DispatchType>[]): void
      withTypes<MiddlewareConfig extends MiddlewareApiConfig>(): AddMiddleware<
       GetState<MiddlewareConfig>,
           GetDispatch<MiddlewareConfig>
         >
      }

  2. Removing some import aliases:

     - import type { Dispatch as ReduxDispatch } from 'redux'
     + import type { Dispatch } from 'redux'

• Patches console-testing-library so we can run the type tests with "moduleResolution": "Bundler". Previously it would fail due to console-testing-library not having a types field in it's subpath exports.

• Adds 3 new example workspaces:

1. @examples-type-portability/bundler to test for "moduleResolution": "Bundler".
2. @examples-type-portability/nodenext-cjs to test for "moduleResolution": "NodeNext" with TypeScript's CJS syntax and "type": "commonjs" in package.json.
3. @examples-type-portability/nodenext-esm to test for "moduleResolution": "NodeNext" with ESM syntax and "type": "module" in package.json.

Things to keep in mind

• Although I prefer using interfaces, it might be worthwhile to switch to type aliases going forward. interfaces are more prone to type portability issues compared to type aliases, which often dissolve into their constituents. I highly recommend using type aliases for all new types unless interfaces are necessary (e.g., for declaration merging).

• I've noticed that using an interface as the return type of an external function often leads to type portability issues unless the interface itself is also exported.

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit bd83e94:

Sandbox	Source
@examples-query-react/basic	Configuration
@examples-query-react/advanced	Configuration
@examples-action-listener/counter	Configuration
rtk-esm-cra	Configuration

[netlify]

✅ Deploy Preview for redux-starter-kit-docs ready!

Name	Link
🔨 Latest commit	bd83e94
🔍 Latest deploy log	https://app.netlify.com/sites/redux-starter-kit-docs/deploys/66a19cb989b5cc000897560a
😎 Deploy Preview	https://deploy-preview-4467--redux-starter-kit-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[EskiMojo14]

this is going to cause a painful amount of conflicts with other PRs 😅

[aryaemami59]

I know, I'm sorry :( but I really think this will be worth it.

[aryaemami59]

Just out of curiosity what are some of the other PRs that are gonna have conflicts with this one? And is there anything I can do to minimize said conflicts?

[EskiMojo14]

the changes in this PR are very wide reaching (including some renames that seem unrelated to the issue at hand?), so i suspect quite a few will encounter issues, but in particular the creator PR #3837 is quite significant in how much it reworks, and will certainly encounter issues when trying to reconcile with this.

[aryaemami59]

The renames were necessary, they were causing issues with name collisions, I'll see if I can work around it to minimize conflicts with other PRs.