|
1 | 1 | # React & Redux in TypeScript - Static Typing Guide
|
2 |
| -**_"This guide is about to teach you how to leverage [Type Inference](https://www.typescriptlang.org/docs/handbook/type-inference.html), [Generics](https://www.typescriptlang.org/docs/handbook/generics.html) and other [Advanced Types](https://www.typescriptlang.org/docs/handbook/advanced-types.html) as much as possible to write the minimal amount of type annotations needed for your JavaScript code to be completely Type Safe"_** - this will make sure you get all the benefits of Static Typing and won't slow down your productivity by adding unnecessary typings. |
| 2 | +**_"This guide is about to teach you how to leverage [Type Inference](https://www.typescriptlang.org/docs/handbook/type-inference.html), [Generics](https://www.typescriptlang.org/docs/handbook/generics.html) and other [Advanced Types](https://www.typescriptlang.org/docs/handbook/advanced-types.html) as much as possible to write the minimal amount of type annotations needed for your JavaScript code to be completely Type Safe"_** - this will make sure you get all the benefits of Static Typing and your productivity won't be slowed down by adding excess type annotations. |
3 | 3 |
|
4 | 4 | > #### _Found it usefull? Want more updates?_ [**Give it a :star2:**](https://github.com/piotrwitek/react-redux-typescript-patterns/stargazers)
|
5 | 5 |
|
|
10 | 10 |
|
11 | 11 | ### Playground Project
|
12 | 12 | You should check Playground Project located in the `/playground` folder. It is a source of all the code examples found in the guide. They are all tested with the most recent version of TypeScript and 3rd party type definitions (like `@types/react` or `@types/react-redux`) to ensure the examples are up-to-date and not broken with updated definitions.
|
13 |
| -> Playground was created is such ą way, that you can easily clone repository locally and immediately play around on your own to learn all the examples from this guide in a real project environment without complicated setup. |
| 13 | +> Playground was created is such a way, that you can simply clone the repository locally and immediately play around on your own to learn all the examples from this guide in a real project environment without the need to create some complicated environment setup by yourself. |
14 | 14 |
|
15 | 15 | ---
|
16 | 16 |
|
@@ -630,6 +630,7 @@ This pattern is focused on a KISS principle - to stay clear of complex proprieta
|
630 | 630 | Advantages:
|
631 | 631 | - simple "const" based types
|
632 | 632 | - familiar to standard JS usage
|
| 633 | +
|
633 | 634 | Disadvantages:
|
634 | 635 | - significant amount of boilerplate and duplication
|
635 | 636 | - necessary to export both action types and action creators to re-use in other places, e.g. `redux-saga` or `redux-observable`
|
@@ -882,8 +883,8 @@ export type RootAction =
|
882 | 883 |
|
883 | 884 | ### Create Store
|
884 | 885 |
|
885 |
| -When creating store use rootReducer instance, this alone will to set-up **strongly typed Store instance** with type inference. |
886 |
| -> The resulting store instance methods like `getState` or `dispatch` will be typed checked and expose type errors |
| 886 | +When creating the store, use rootReducer. This will set-up a **strongly typed Store instance** with type inference. |
| 887 | +> The resulting store instance methods like `getState` or `dispatch` will be type checked and expose type errors |
887 | 888 |
|
888 | 889 | ```tsx
|
889 | 890 | import { createStore, applyMiddleware, compose } from 'redux';
|
@@ -1232,7 +1233,7 @@ declare module 'enzyme';
|
1232 | 1233 | # FAQ
|
1233 | 1234 |
|
1234 | 1235 | ### - should I still use React.PropTypes in TS?
|
1235 |
| -> No. When using TypeScript it is an unnecessary overhead, when declaring IProps and IState interfaces, you will get complete intellisense and compile-time safety with static type checking, this way you'll be safe from runtime errors and you will save a lot of time on debugging. Additional benefit is an elegant and standarized method of documenting your component external API in the source code. |
| 1236 | +> No. With TypeScript, using PropTypes is an unnecessary overhead. When declaring IProps and IState interfaces, you will get complete intellisense and compile-time safety with static type checking. This way you'll be safe from runtime errors and you will save a lot of time on debugging. Additional benefit is an elegant and standardized method of documenting your component external API in the source code. |
1236 | 1237 |
|
1237 | 1238 | [⇧ back to top](#table-of-contents)
|
1238 | 1239 |
|
|
0 commit comments