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
+33-44
Original file line number
Diff line number
Diff line change
@@ -1,26 +1,22 @@
1
1
## React & Redux in TypeScript - Static Typing Guide
2
2
3
-
_"This guide is a **living compendium** documenting the most important patterns and recipes on how to use **React** (and its 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."_
3
+
_"This guide is a **living compendium** documenting the most important patterns and recipes on how to use **React** (and its Ecosystem) in a **functional style** using **TypeScript**. It will help you make your code **completely type-safe** while focusing on **inferring the types from implementation** so there is less noise coming from excessive type annotations and it's easier to write and maintain correct types in the long run."_
4
4
5
5
[](https://gitter.im/react-redux-typescript-guide/Lobby)
6
+
> #### _Found it useful? Want more updates?_[**Show your support by giving a :star:**](https://github.com/piotrwitek/react-redux-typescript-guide/stargazers)
6
7
7
-
> #### _Found it useful? Want more updates?_[**Show your support by giving a :star:**](https://github.com/piotrwitek/react-redux-typescript-patterns/stargazers)
8
+
:tada:_Now updated to be compatible with **TypeScript v3.1.6**_:tada:
8
9
9
-
> _[The Mighty Tutorial](https://github.com/piotrwitek/typesafe-actions#behold-the-mighty-tutorial) for completely typesafe Redux Architecture_:book:
10
-
11
-
> _Reference implementation of Todo-App with `typesafe-actions`: https://codesandbox.io/s/github/piotrwitek/typesafe-actions-todo-app_:computer:
12
-
13
-
> _Now compatible with **TypeScript v2.8.3** (rewritten using conditional types)_:tada:
10
+
:computer:_Reference implementation of Todo-App with `typesafe-actions`: https://codesandbox.io/s/github/piotrwitek/typesafe-actions-todo-app_:computer:
14
11
15
12
### Goals
16
13
- Complete type safety (with [`--strict`](https://www.typescriptlang.org/docs/handbook/compiler-options.html) flag) without losing type information downstream through all the layers of our application (e.g. no type assertions or hacking with `any` type)
17
14
- Make type annotations concise by eliminating redundancy in types using advanced TypeScript Language features like **Type Inference** and **Control flow analysis**
18
15
- Reduce repetition and complexity of types with TypeScript focused [complementary libraries](#complementary-libraries)
19
16
20
-
### Complementary Projects
21
-
- Typesafe Action Creators for Redux / Flux Architectures [typesafe-actions](https://github.com/piotrwitek/typesafe-actions)
22
-
- Utility Types for TypeScript: [utility-types](https://github.com/piotrwitek/utility-types)
23
-
- Reference implementation of Todo-App: [typesafe-actions-todo-app](https://github.com/piotrwitek/typesafe-actions-todo-app)
17
+
### Complementary Libraries
18
+
-[utility-types](https://github.com/piotrwitek/utility-types) - Collection of generic types for TypeScript, complementing built-in mapped types and aliases - think lodash for reusable types.
19
+
-[typesafe-actions](https://github.com/piotrwitek/typesafe-actions) - Typesafe utilities for "action-creators" in Redux / Flux Architecture
@@ -29,46 +25,45 @@ You should check out Playground Project located in the `/playground` folder. It
29
25
> Playground was created in such a way that you can simply clone the repository locally and immediately play around on your own. It will help you to learn all the examples from this guide in a real project environment without the need to create some complicated environment setup by yourself.
30
26
31
27
## Contributing Guide
32
-
If you're planning to contribute please make sure to read the contributing guide: [CONTRIBUTING.md](/CONTRIBUTING.md)
28
+
We are open for contributions. If you're planning to contribute please make sure to read the contributing guide: [CONTRIBUTING.md](/CONTRIBUTING.md)
33
29
34
30
## Sponsor
35
-
If you like what we're doing here, you can help us by funding the work on specific issues that you choose by using IssueHunt.io!
31
+
This is an independent open-source project created by people investing their free time for the benefit of our community.
36
32
37
-
This gives you the power to prioritize our work and support the project contributors. Moreover it'll guarantee the project will be updated and maintained in the long run.
33
+
If you are using it please consider donating as this will guarantee the project will be updated and maintained in the long run.
38
34
39
-
> Sponsors are listed in the contributors section at the bottom. If you want to be removed please contact me at: [email protected]
35
+
Issues can be funded by anyone and the money will be transparently distributed to the contributors handling a particular issue.
@@ -81,9 +76,9 @@ This gives you the power to prioritize our work and support the project contribu
81
76
82
77
---
83
78
84
-
# Type Definitions & Complementary Libraries
79
+
# Introduction
85
80
86
-
### TypeDefinitions for React & Redux
81
+
### Type-Definitions for React & Redux
87
82
```
88
83
npm i -D @types/react @types/react-dom @types/react-redux
89
84
```
@@ -93,19 +88,13 @@ npm i -D @types/react @types/react-dom @types/react-redux
93
88
"redux" - (types included with npm package)*
94
89
"react-redux" - `@types/react-redux`
95
90
96
-
> *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))
97
-
98
-
### Complementary Libraries
99
-
> Utility libraries **with focus on type-safety** providing a light functional abstractions for common use-cases
100
-
101
-
-["utility-types"](https://github.com/piotrwitek/utility-types) - Utility Types for TypeScript (think lodash for types, moreover provides migration from Flow's Utility Types)
102
-
-["typesafe-actions"](https://github.com/piotrwitek/typesafe-actions) - Typesafe Action Creators for Redux / Flux Architectures (in TypeScript)
91
+
> *NB: Guide is based on types for Redux >= v4.x.x. 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))
103
92
104
93
[⇧ back to top](#table-of-contents)
105
94
106
95
---
107
96
108
-
# React Types Cheatsheet
97
+
# React - Type-Definitions Cheatsheet
109
98
110
99
#### `React.FunctionComponent<P>` or `React.FC<P>`
Copy file name to clipboardexpand all lines: README_SOURCE.md
+33-44
Original file line number
Diff line number
Diff line change
@@ -1,26 +1,22 @@
1
1
## React & Redux in TypeScript - Static Typing Guide
2
2
3
-
_"This guide is a **living compendium** documenting the most important patterns and recipes on how to use **React** (and its 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."_
3
+
_"This guide is a **living compendium** documenting the most important patterns and recipes on how to use **React** (and its Ecosystem) in a **functional style** using **TypeScript**. It will help you make your code **completely type-safe** while focusing on **inferring the types from implementation** so there is less noise coming from excessive type annotations and it's easier to write and maintain correct types in the long run."_
4
4
5
5
[](https://gitter.im/react-redux-typescript-guide/Lobby)
6
+
> #### _Found it useful? Want more updates?_[**Show your support by giving a :star:**](https://github.com/piotrwitek/react-redux-typescript-guide/stargazers)
6
7
7
-
> #### _Found it useful? Want more updates?_[**Show your support by giving a :star:**](https://github.com/piotrwitek/react-redux-typescript-patterns/stargazers)
8
+
:tada:_Now updated to be compatible with **TypeScript v3.1.6**_:tada:
8
9
9
-
> _[The Mighty Tutorial](https://github.com/piotrwitek/typesafe-actions#behold-the-mighty-tutorial) for completely typesafe Redux Architecture_:book:
10
-
11
-
> _Reference implementation of Todo-App with `typesafe-actions`: https://codesandbox.io/s/github/piotrwitek/typesafe-actions-todo-app_:computer:
12
-
13
-
> _Now compatible with **TypeScript v2.8.3** (rewritten using conditional types)_:tada:
10
+
:computer:_Reference implementation of Todo-App with `typesafe-actions`: https://codesandbox.io/s/github/piotrwitek/typesafe-actions-todo-app_:computer:
14
11
15
12
### Goals
16
13
- Complete type safety (with [`--strict`](https://www.typescriptlang.org/docs/handbook/compiler-options.html) flag) without losing type information downstream through all the layers of our application (e.g. no type assertions or hacking with `any` type)
17
14
- Make type annotations concise by eliminating redundancy in types using advanced TypeScript Language features like **Type Inference** and **Control flow analysis**
18
15
- Reduce repetition and complexity of types with TypeScript focused [complementary libraries](#complementary-libraries)
19
16
20
-
### Complementary Projects
21
-
- Typesafe Action Creators for Redux / Flux Architectures [typesafe-actions](https://github.com/piotrwitek/typesafe-actions)
22
-
- Utility Types for TypeScript: [utility-types](https://github.com/piotrwitek/utility-types)
23
-
- Reference implementation of Todo-App: [typesafe-actions-todo-app](https://github.com/piotrwitek/typesafe-actions-todo-app)
17
+
### Complementary Libraries
18
+
-[utility-types](https://github.com/piotrwitek/utility-types) - Collection of generic types for TypeScript, complementing built-in mapped types and aliases - think lodash for reusable types.
19
+
-[typesafe-actions](https://github.com/piotrwitek/typesafe-actions) - Typesafe utilities for "action-creators" in Redux / Flux Architecture
@@ -29,46 +25,45 @@ You should check out Playground Project located in the `/playground` folder. It
29
25
> Playground was created in such a way that you can simply clone the repository locally and immediately play around on your own. It will help you to learn all the examples from this guide in a real project environment without the need to create some complicated environment setup by yourself.
30
26
31
27
## Contributing Guide
32
-
If you're planning to contribute please make sure to read the contributing guide: [CONTRIBUTING.md](/CONTRIBUTING.md)
28
+
We are open for contributions. If you're planning to contribute please make sure to read the contributing guide: [CONTRIBUTING.md](/CONTRIBUTING.md)
33
29
34
30
## Sponsor
35
-
If you like what we're doing here, you can help us by funding the work on specific issues that you choose by using IssueHunt.io!
31
+
This is an independent open-source project created by people investing their free time for the benefit of our community.
36
32
37
-
This gives you the power to prioritize our work and support the project contributors. Moreover it'll guarantee the project will be updated and maintained in the long run.
33
+
If you are using it please consider donating as this will guarantee the project will be updated and maintained in the long run.
38
34
39
-
> Sponsors are listed in the contributors section at the bottom. If you want to be removed please contact me at: [email protected]
35
+
Issues can be funded by anyone and the money will be transparently distributed to the contributors handling a particular issue.
@@ -81,9 +76,9 @@ This gives you the power to prioritize our work and support the project contribu
81
76
82
77
---
83
78
84
-
# Type Definitions & Complementary Libraries
79
+
# Introduction
85
80
86
-
### TypeDefinitions for React & Redux
81
+
### Type-Definitions for React & Redux
87
82
```
88
83
npm i -D @types/react @types/react-dom @types/react-redux
89
84
```
@@ -93,19 +88,13 @@ npm i -D @types/react @types/react-dom @types/react-redux
93
88
"redux" - (types included with npm package)*
94
89
"react-redux" - `@types/react-redux`
95
90
96
-
> *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))
97
-
98
-
### Complementary Libraries
99
-
> Utility libraries **with focus on type-safety** providing a light functional abstractions for common use-cases
100
-
101
-
-["utility-types"](https://github.com/piotrwitek/utility-types) - Utility Types for TypeScript (think lodash for types, moreover provides migration from Flow's Utility Types)
102
-
-["typesafe-actions"](https://github.com/piotrwitek/typesafe-actions) - Typesafe Action Creators for Redux / Flux Architectures (in TypeScript)
91
+
> *NB: Guide is based on types for Redux >= v4.x.x. 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))
103
92
104
93
[⇧ back to top](#table-of-contents)
105
94
106
95
---
107
96
108
-
# React Types Cheatsheet
97
+
# React - Type-Definitions Cheatsheet
109
98
110
99
#### `React.FunctionComponent<P>` or `React.FC<P>`
0 commit comments