From 295fb02f26c6f3b3ffd80f9655a2404c2d21db58 Mon Sep 17 00:00:00 2001 From: Narutama Aurum Date: Fri, 22 May 2026 21:04:10 +0800 Subject: [PATCH 1/2] Document the MyTypes global namespace pattern --- README.md | 48 ++++++++++++++++++++++++++++++++++++++++++++++++ README_SOURCE.md | 28 ++++++++++++++++++++++++++++ 2 files changed, 76 insertions(+) diff --git a/README.md b/README.md index 647b5c7..84320dd 100644 --- a/README.md +++ b/README.md @@ -135,6 +135,7 @@ I highly recommend to add a bounty to the issue that you're waiting for to incre - [Connect with `react-redux`](#connect-with-react-redux) - [Typing connected component](#typing-connected-component) - [Typing `useSelector` and `useDispatch`](#typing-useselector-and-usedispatch) + - [Types global namespace](#types-global-namespace) - [Typing connected component with `redux-thunk` integration](#typing-connected-component-with-redux-thunk-integration) - [Configuration & Dev Tools](#configuration--dev-tools) - [Common Npm Scripts](#common-npm-scripts) @@ -1837,6 +1838,53 @@ export const useDispatch: () => Dispatch = useGenericDispatch; [⇧ back to top](#table-of-contents) +### Types global namespace + +The `MyTypes` module is a shared namespace that lets each feature own its local +types while still contributing to a central app-level contract. + +- `playground/typings/modules.d.ts` declares the ambient module name. +- `playground/src/store/types.d.ts` augments it with `Store`, `RootAction`, and + `RootState`. +- `playground/src/services/types.d.ts` augments the same module with `Services`. + +Because each module augments `MyTypes` independently, types stay close to the +code that owns them instead of being collected in one giant file. + +```tsx +import { StateType, ActionType } from 'typesafe-actions'; + +declare module 'MyTypes' { + export type Store = StateType; + export type RootAction = ActionType; + export type RootState = StateType>; +} + +declare module 'typesafe-actions' { + interface Types { + RootAction: ActionType; + } +} + +``` + +```tsx +declare module 'MyTypes' { + export type Services = typeof import('./index').default; +} + +``` + +```ts +import { RootState, RootAction, Services } from 'MyTypes'; +``` + +This pattern keeps imports stable and makes cross-cutting app types reusable in +selectors, store hooks, middleware, and connected components without duplicating +definitions. + +[⇧ back to top](#table-of-contents) + ### Typing connected component with `redux-thunk` integration _**NOTE**: When using thunk action creators you need to use `bindActionCreators`. Only this way you can get corrected dispatch props type signature like below.*_ diff --git a/README_SOURCE.md b/README_SOURCE.md index 358fcc3..5dd0424 100644 --- a/README_SOURCE.md +++ b/README_SOURCE.md @@ -135,6 +135,7 @@ I highly recommend to add a bounty to the issue that you're waiting for to incre - [Connect with `react-redux`](#connect-with-react-redux) - [Typing connected component](#typing-connected-component) - [Typing `useSelector` and `useDispatch`](#typing-useselector-and-usedispatch) + - [Types global namespace](#types-global-namespace) - [Typing connected component with `redux-thunk` integration](#typing-connected-component-with-redux-thunk-integration) - [Configuration & Dev Tools](#configuration--dev-tools) - [Common Npm Scripts](#common-npm-scripts) @@ -718,6 +719,33 @@ const mapDispatchToProps = (dispatch: Dispatch) => [⇧ back to top](#table-of-contents) +### Types global namespace + +The `MyTypes` module is a shared namespace that lets each feature own its local +types while still contributing to a central app-level contract. + +- `playground/typings/modules.d.ts` declares the ambient module name. +- `playground/src/store/types.d.ts` augments it with `Store`, `RootAction`, and + `RootState`. +- `playground/src/services/types.d.ts` augments the same module with `Services`. + +Because each module augments `MyTypes` independently, types stay close to the +code that owns them instead of being collected in one giant file. + +::codeblock='playground/src/store/types.d.ts':: + +::codeblock='playground/src/services/types.d.ts':: + +```ts +import { RootState, RootAction, Services } from 'MyTypes'; +``` + +This pattern keeps imports stable and makes cross-cutting app types reusable in +selectors, store hooks, middleware, and connected components without duplicating +definitions. + +[⇧ back to top](#table-of-contents) + ### Typing connected component with `redux-thunk` integration _**NOTE**: When using thunk action creators you need to use `bindActionCreators`. Only this way you can get corrected dispatch props type signature like below.*_ From 5bf1db443d88bc37c23f5f98a72c0c0d98db2bfa Mon Sep 17 00:00:00 2001 From: Narutama Aurum Date: Sat, 23 May 2026 05:01:54 +0800 Subject: [PATCH 2/2] docs: tighten MyTypes ambient module example --- README.md | 9 ++++++--- README_SOURCE.md | 7 +++++-- playground/typings/modules.d.ts | 2 +- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 84320dd..e7a1596 100644 --- a/README.md +++ b/README.md @@ -1841,9 +1841,12 @@ export const useDispatch: () => Dispatch = useGenericDispatch; ### Types global namespace The `MyTypes` module is a shared namespace that lets each feature own its local -types while still contributing to a central app-level contract. +types while still contributing to a central app-level contract. It builds on the +`RootState` and `RootAction` setup from the [Create Global Store +Types](#create-global-store-types) section above. -- `playground/typings/modules.d.ts` declares the ambient module name. +- `playground/typings/modules.d.ts` provides the empty ambient module that later + files augment. - `playground/src/store/types.d.ts` augments it with `Store`, `RootAction`, and `RootState`. - `playground/src/services/types.d.ts` augments the same module with `Services`. @@ -2139,7 +2142,7 @@ if you cannot find types for a third-party module you can provide your own types ```tsx // typings/modules.d.ts -declare module 'MyTypes'; +declare module 'MyTypes' {} declare module 'react-test-renderer'; declare module '@storybook/addon-storyshots' diff --git a/README_SOURCE.md b/README_SOURCE.md index 5dd0424..9546804 100644 --- a/README_SOURCE.md +++ b/README_SOURCE.md @@ -722,9 +722,12 @@ const mapDispatchToProps = (dispatch: Dispatch) => ### Types global namespace The `MyTypes` module is a shared namespace that lets each feature own its local -types while still contributing to a central app-level contract. +types while still contributing to a central app-level contract. It builds on the +`RootState` and `RootAction` setup from the [Create Global Store +Types](#create-global-store-types) section above. -- `playground/typings/modules.d.ts` declares the ambient module name. +- `playground/typings/modules.d.ts` provides the empty ambient module that later + files augment. - `playground/src/store/types.d.ts` augments it with `Store`, `RootAction`, and `RootState`. - `playground/src/services/types.d.ts` augments the same module with `Services`. diff --git a/playground/typings/modules.d.ts b/playground/typings/modules.d.ts index f268048..e4815e2 100644 --- a/playground/typings/modules.d.ts +++ b/playground/typings/modules.d.ts @@ -1,4 +1,4 @@ // typings/modules.d.ts -declare module 'MyTypes'; +declare module 'MyTypes' {} declare module 'react-test-renderer'; declare module '@storybook/addon-storyshots'