You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+20-11Lines changed: 20 additions & 11 deletions
Original file line number
Diff line number
Diff line change
@@ -1,15 +1,19 @@
1
1
# React & Redux in TypeScript - Static Typing Guide
2
2
3
-
**_"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
+
_"This guide is a **living compendium** documenting the most important patterns and recipes on how to use **React** (and it's Ecosystem) in a **functional style with TypeScript** and to make your code **completely type-safe** while focusing on a **conciseness of type annotations** so it's a minimal effort to write and to maintain types in the long run."_
4
+
5
+
To provide the best experience we focus on the symbiosis of type-safe complementary libraries and learning the concepts like [Type Inference](https://www.typescriptlang.org/docs/handbook/type-inference.html), [Control flow analysis](https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript#control-flow-based-type-analysis), [Generics](https://www.typescriptlang.org/docs/handbook/generics.html) and some [Advanced Types](https://www.typescriptlang.org/docs/handbook/advanced-types.html).
6
+
7
+
(_Compatible with **TypeScript v2.7.2**_)
4
8
5
9
[](https://gitter.im/react-redux-typescript-guide/Lobby)
6
10
7
11
> #### _Found it usefull? Want more updates?_[**Give it a :star2:**](https://github.com/piotrwitek/react-redux-typescript-patterns/stargazers)
8
12
9
13
### Goals
10
-
- Complete type safety with [`--strict`](https://www.typescriptlang.org/docs/handbook/compiler-options.html) flag without failing to `any` type for the best static-typing experience
11
-
-Minimize amount of manually writing type declarations by learning to leverage [Type Inference](https://www.typescriptlang.org/docs/handbook/type-inference.html)
12
-
- Reduce repetition and complexity of "Redux" type annotations to a minimum with [simple functional utilities](https://github.com/piotrwitek/typesafe-actions#typesafe-actions)
14
+
- Complete type safety (with [`--strict`](https://www.typescriptlang.org/docs/handbook/compiler-options.html) flag) without loosing type information downstream through all the layers of our application (e.g. no type assertions or hacking with `any` type)
15
+
-Make type annotations concise by eliminating redudancy in types using advanced TypeScript Language features like **Type Inference** and **Control flow analysis**
16
+
- Reduce repetition and complexity of types with TypeScript focused [complementary libraries](#complementary-libraries)
13
17
14
18
### Playground Project
15
19
[](https://app.codeship.com/projects/262359)
@@ -20,7 +24,7 @@ You should check Playground Project located in the `/playground` folder. It is a
@@ -54,20 +58,25 @@ You should check Playground Project located in the `/playground` folder. It is a
54
58
55
59
---
56
60
57
-
# Setup
61
+
# Type Definitions & Complementary Libraries
58
62
59
-
### Installing types
63
+
### Type Definitions for React & Redux
60
64
```
61
-
npm i -D @types/react @types/react-dom @types/react-redux utility-types
65
+
npm i -D @types/react @types/react-dom @types/react-redux
62
66
```
63
67
64
68
"react" - `@types/react`
65
69
"react-dom" - `@types/react-dom`
66
70
"redux" - (types included with npm package)*
67
71
"react-redux" - `@types/react-redux`
68
-
["utility-types"](https://github.com/piotrwitek/utility-types) - usefull utility types used throughout the guide
69
72
70
-
> *NB: Guide uses redux v4.x.x types. For version v3.x.x please check [this config](https://github.com/piotrwitek/react-redux-typescript-guide/blob/master/playground/tsconfig.json#L5))
73
+
> *NB: Guide is based on types from Redux v4.x.x (Beta). To make it work with Redux v3.x.x please refer to [this config](https://github.com/piotrwitek/react-redux-typescript-guide/blob/master/playground/tsconfig.json#L5))
74
+
75
+
### Complementary Libraries
76
+
> Utility libraries **with focus on type-safety** providing a light functional abstractions for common use-cases
77
+
78
+
-["utility-types"](https://github.com/piotrwitek/utility-types) - Utility Types for TypeScript (think lodash for types, moreover provides migration from Flow's Utility Types)
79
+
-["typesafe-actions"](https://github.com/piotrwitek/typesafe-actions) - Typesafe Action Creators for Redux / Flux Architectures (in TypeScript)
npm i -D @types/react @types/react-dom @types/react-redux utility-types
5
+
npm i -D @types/react @types/react-dom @types/react-redux
6
6
```
7
7
8
8
"react" - `@types/react`
9
9
"react-dom" - `@types/react-dom`
10
10
"redux" - (types included with npm package)*
11
11
"react-redux" - `@types/react-redux`
12
-
["utility-types"](https://github.com/piotrwitek/utility-types) - usefull utility types used throughout the guide
13
12
14
-
> *NB: Guide uses redux v4.x.x types. For version v3.x.x please check [this config](https://github.com/piotrwitek/react-redux-typescript-guide/blob/master/playground/tsconfig.json#L5))
13
+
> *NB: Guide is based on types from Redux v4.x.x (Beta). To make it work with Redux v3.x.x please refer to [this config](https://github.com/piotrwitek/react-redux-typescript-guide/blob/master/playground/tsconfig.json#L5))
14
+
15
+
### Complementary Libraries
16
+
> Utility libraries **with focus on type-safety** providing a light functional abstractions for common use-cases
17
+
18
+
-["utility-types"](https://github.com/piotrwitek/utility-types) - Utility Types for TypeScript (think lodash for types, moreover provides migration from Flow's Utility Types)
19
+
-["typesafe-actions"](https://github.com/piotrwitek/typesafe-actions) - Typesafe Action Creators for Redux / Flux Architectures (in TypeScript)
Copy file name to clipboardExpand all lines: docs/markdown/_intro.md
+8-4Lines changed: 8 additions & 4 deletions
Original file line number
Diff line number
Diff line change
@@ -1,15 +1,19 @@
1
1
# React & Redux in TypeScript - Static Typing Guide
2
2
3
-
**_"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
+
_"This guide is a **living compendium** documenting the most important patterns and recipes on how to use **React** (and it's Ecosystem) in a **functional style with TypeScript** and to make your code **completely type-safe** while focusing on a **conciseness of type annotations** so it's a minimal effort to write and to maintain types in the long run."_
4
+
5
+
To provide the best experience we focus on the symbiosis of type-safe complementary libraries and learning the concepts like [Type Inference](https://www.typescriptlang.org/docs/handbook/type-inference.html), [Control flow analysis](https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript#control-flow-based-type-analysis), [Generics](https://www.typescriptlang.org/docs/handbook/generics.html) and some [Advanced Types](https://www.typescriptlang.org/docs/handbook/advanced-types.html).
6
+
7
+
(_Compatible with **TypeScript v2.7.2**_)
4
8
5
9
[](https://gitter.im/react-redux-typescript-guide/Lobby)
6
10
7
11
> #### _Found it usefull? Want more updates?_[**Give it a :star2:**](https://github.com/piotrwitek/react-redux-typescript-patterns/stargazers)
8
12
9
13
### Goals
10
-
- Complete type safety with [`--strict`](https://www.typescriptlang.org/docs/handbook/compiler-options.html) flag without failing to `any` type for the best static-typing experience
11
-
-Minimize amount of manually writing type declarations by learning to leverage [Type Inference](https://www.typescriptlang.org/docs/handbook/type-inference.html)
12
-
- Reduce repetition and complexity of "Redux" type annotations to a minimum with [simple functional utilities](https://github.com/piotrwitek/typesafe-actions#typesafe-actions)
14
+
- Complete type safety (with [`--strict`](https://www.typescriptlang.org/docs/handbook/compiler-options.html) flag) without loosing type information downstream through all the layers of our application (e.g. no type assertions or hacking with `any` type)
15
+
-Make type annotations concise by eliminating redudancy in types using advanced TypeScript Language features like **Type Inference** and **Control flow analysis**
16
+
- Reduce repetition and complexity of types with TypeScript focused [complementary libraries](#complementary-libraries)
13
17
14
18
### Playground Project
15
19
[](https://app.codeship.com/projects/262359)
0 commit comments