diff --git a/README.md b/README.md index 647b5c7..e7a1596 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,56 @@ 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. 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` 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`. + +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.*_ @@ -2091,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 358fcc3..9546804 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,36 @@ 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. 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` 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`. + +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.*_ 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'