Skip to content

Commit e2b1fd4

Browse files
authored
Update README.md (piotrwitek#60)
* Update README.md * Regenerated content
1 parent f2926b8 commit e2b1fd4

File tree

4 files changed

+39
-21
lines changed

4 files changed

+39
-21
lines changed

README.md

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
# React & Redux in TypeScript - Static Typing Guide
22

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**_)
48

59
[![Join the chat at https://gitter.im/react-redux-typescript-guide/Lobby](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/react-redux-typescript-guide/Lobby)
610

711
> #### _Found it usefull? Want more updates?_ [**Give it a :star2:**](https://github.com/piotrwitek/react-redux-typescript-patterns/stargazers)
812
913
### 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)
1317

1418
### Playground Project
1519
[![Codeship Status for piotrwitek/react-redux-typescript-guide](https://app.codeship.com/projects/11eb8c10-d117-0135-6c51-26e28af241d2/status?branch=master)](https://app.codeship.com/projects/262359)
@@ -20,7 +24,7 @@ You should check Playground Project located in the `/playground` folder. It is a
2024
---
2125

2226
## Table of Contents
23-
- [Setup](#setup)
27+
- [Type Definitions & Complementary Libraries](#type-definitions-&-complementary-libraries)
2428
- [React Types Cheatsheet](#react-types-cheatsheet) 🌟 __NEW__
2529
- [Component Typing Patterns](#component-typing-patterns)
2630
- [Stateless Components - SFC](#stateless-components---sfc)
@@ -54,20 +58,25 @@ You should check Playground Project located in the `/playground` folder. It is a
5458

5559
---
5660

57-
# Setup
61+
# Type Definitions & Complementary Libraries
5862

59-
### Installing types
63+
### Type Definitions for React & Redux
6064
```
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
6266
```
6367

6468
"react" - `@types/react`
6569
"react-dom" - `@types/react-dom`
6670
"redux" - (types included with npm package)*
6771
"react-redux" - `@types/react-redux`
68-
["utility-types"](https://github.com/piotrwitek/utility-types) - usefull utility types used throughout the guide
6972

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)
7180

7281
[⇧ back to top](#table-of-contents)
7382

@@ -370,7 +379,7 @@ export const withState = <P extends WrappedComponentProps>(
370379
static displayName = `withState(${WrappedComponent.name})`;
371380

372381
state: State = {
373-
count: (this.props.initialCount || 0)!,
382+
count: Number(this.props.initialCount) || 0,
374383
};
375384

376385
handleIncrement = () => {

docs/markdown/0_setup.md

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,21 @@
1-
# Setup
1+
# Type Definitions & Complementary Libraries
22

3-
### Installing types
3+
### Type Definitions for React & Redux
44
```
5-
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
66
```
77

88
"react" - `@types/react`
99
"react-dom" - `@types/react-dom`
1010
"redux" - (types included with npm package)*
1111
"react-redux" - `@types/react-redux`
12-
["utility-types"](https://github.com/piotrwitek/utility-types) - usefull utility types used throughout the guide
1312

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)
1520

1621
[⇧ back to top](#table-of-contents)

docs/markdown/_intro.md

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
# React & Redux in TypeScript - Static Typing Guide
22

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**_)
48

59
[![Join the chat at https://gitter.im/react-redux-typescript-guide/Lobby](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/react-redux-typescript-guide/Lobby)
610

711
> #### _Found it usefull? Want more updates?_ [**Give it a :star2:**](https://github.com/piotrwitek/react-redux-typescript-patterns/stargazers)
812
913
### 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)
1317

1418
### Playground Project
1519
[![Codeship Status for piotrwitek/react-redux-typescript-guide](https://app.codeship.com/projects/11eb8c10-d117-0135-6c51-26e28af241d2/status?branch=master)](https://app.codeship.com/projects/262359)

docs/markdown/_toc.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
## Table of Contents
2-
- [Setup](#setup)
2+
- [Type Definitions & Complementary Libraries](#type-definitions-&-complementary-libraries)
33
- [React Types Cheatsheet](#react-types-cheatsheet) 🌟 __NEW__
44
- [Component Typing Patterns](#component-typing-patterns)
55
- [Stateless Components - SFC](#stateless-components---sfc)

0 commit comments

Comments
 (0)