|
1 | 1 | # React & Redux in TypeScript - Static Typing Guide
|
2 |
| -A comprehensive guide to static typing in "React & Redux" apps using TypeScript. |
| 2 | +This guide is **NOT** about _"How to write type declarations for every possible variable and expression to have 100% type covered code and waste a lot of time"_. |
| 3 | +This guide is about **_"How to write type declarations to only the minimum necessary amount of JavaScript code and still get all the benefits of Static Typing"_**. |
| 4 | + |
3 | 5 | > found it usefull, want some more? [give it a :star:](https://github.com/piotrwitek/react-redux-typescript-patterns/stargazers)
|
4 | 6 |
|
| 7 | +--- |
| 8 | + |
| 9 | +### Announcements |
| 10 | + |
5 | 11 | - #### Working with TypeScript v2.3 - [Check the Roadmap](https://github.com/Microsoft/TypeScript/wiki/Roadmap)
|
6 |
| -- #### (Update for TypeScript v2.4 - in progress) |
| 12 | +- #### (Update for TypeScript v2.4 + v2.5 - fat PR on the way, lot of changes, almost there!) |
7 | 13 |
|
8 | 14 | ### Introduction
|
9 |
| -This guide is aimed for strict setup of TypeScript compiler which will provide most complete type safety and best DX. |
10 |
| -With a little bit of effort by adding explicit type annotations where necessary and most of the time leveraging smart [Type Inference](https://www.typescriptlang.org/docs/handbook/type-inference.html), what we will get is this: |
| 15 | +This guide is aimed to use `strict` configuration of TypeScript compiler to provide the best static-typing experience with strict null checking. We want to spent a minimal amount of effort to write explicit type annotations and most of the time to leverage smart [Type Inference](https://www.typescriptlang.org/docs/handbook/type-inference.html). |
| 16 | + |
| 17 | +Benefits of this setup and static-typing in general: |
11 | 18 | - refactoring capabilities with the power equal to strongly typed languages (not "stringly" typed like Webstorm IDE)
|
12 | 19 | - when making changes in your code, precise insight of the impact on the entire codebase (by showing all the references in the codebase for any given piece of code)
|
13 | 20 | - minimal surface area for errors when implementing new features (compiler validate all props injected to connected components, action creator params, payload object structure and state/action objects passed to a reducer - showing all possible JavaScript errors)
|
14 | 21 |
|
15 |
| -This power will make the process of improving your codebase by refactoring, minimizing abstractions levels and cleaning unused code much simpler, and give you confidence that you will not break any working production code. |
16 |
| - |
17 |
| ->**NB:** This setup will give the most benefit if you are working on rapidly changing project and cannot afford writing unit tests (because of the cost of updating them constantly). I successfully benefit from this setup without any single unit-tests on a decent size React/Redux SPA Application and zero production exceptions. The only possible exception source is network, (like failed API calls) which are easily handled. |
18 |
| -Furthermore by providing Interface declarations describing your API contracts you'll be safe from all possible `null` / `undefined` exceptions coming from API responses. |
| 22 | +The power of static-typing will make processes of improving your codebase, refactorings, and cleaning dead code much simpler, and give you a confidence that you will not break your working production code. |
19 | 23 |
|
| 24 | +>**NB:** This setup is very beneficial for rapidly changing projects, expecting a lot of refactorings, who is mostly skipping writing unit tests (because of the additinal costs of updating them). This setup ensure zero production exceptions, with only possible source of exception coming from network and I/O operations, but you can handle them in a typed manner as well (e.g. by providing `interface` declarations describing your API contracts you'll be safe from all possible `null` / `undefined` exceptions coming from API responses). |
20 | 25 | ### Goals:
|
21 |
| -- Complete type safety, without failing to `any` type |
22 |
| -- Minimize amount of manually typing annotations by leveraging [Type Inference](https://www.typescriptlang.org/docs/handbook/type-inference.html) |
| 26 | +- Complete type safety with strict null checking, without failing to `any` type |
| 27 | +- Minimize amount of manually writing type declarations by leveraging [Type Inference](https://www.typescriptlang.org/docs/handbook/type-inference.html) |
23 | 28 | - Reduce boilerplate with [simple utility functions](https://github.com/piotrwitek/react-redux-typescript) using [Generics](https://www.typescriptlang.org/docs/handbook/generics.html) and [Advanced Types](https://www.typescriptlang.org/docs/handbook/advanced-types.html) features
|
24 | 29 |
|
25 | 30 | ### Table of Contents
|
|
0 commit comments