1+ <!-- START doctoc generated TOC please keep comment here to allow auto update -->
2+ <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
3+ ** Table of Contents** * generated with [ DocToc] ( https://github.com/thlorenz/doctoc ) *
4+
5+ - [ React & Redux in TypeScript - Static Typing Guide] ( #react--redux-in-typescript---static-typing-guide )
6+ - [ Contributing Guide] ( #contributing-guide )
7+ - [ Funding] ( #funding )
8+ - [ Table of Contents] ( #table-of-contents )
9+ - [ Installation] ( #installation )
10+ - [ Type-Definitions for React & Redux] ( #type-definitions-for-react--redux )
11+ - [ React - Type-Definitions Cheatsheet] ( #react---type-definitions-cheatsheet )
12+ - [ ` React.FunctionComponent<P> ` or ` React.FC<P> ` ] ( #reactfunctioncomponentp-or-reactfcp )
13+ - [ ` React.Component<P, S> ` ] ( #reactcomponentp-s )
14+ - [ ` React.ComponentProps<typeof Component> ` ] ( #reactcomponentpropstypeof-component )
15+ - [ ` React.ComponentType<P> ` ] ( #reactcomponenttypep )
16+ - [ ` React.ReactElement ` or ` JSX.Element ` ] ( #reactreactelement-or-jsxelement )
17+ - [ ` React.ReactNode ` ] ( #reactreactnode )
18+ - [ ` React.CSSProperties ` ] ( #reactcssproperties )
19+ - [ ` React.HTMLProps<HTMLXXXElement> ` ] ( #reacthtmlpropshtmlxxxelement )
20+ - [ ` React.ReactEventHandler<HTMLXXXElement> ` ] ( #reactreacteventhandlerhtmlxxxelement )
21+ - [ ` React.MouseEvent<HTMLXXXElement> ` | ` React.KeyboardEvent<HTMLXXXElement> ` | ` React.TouchEvent<HTMLXXXElement> ` etc...] ( #reactmouseeventhtmlxxxelement--reactkeyboardeventhtmlxxxelement--reacttoucheventhtmlxxxelement-etc )
22+ - [ React - Typing Patterns] ( #react---typing-patterns )
23+ - [ Function Components - FC] ( #function-components---fc )
24+ - [ - FC counter] ( #--fc-counter )
25+ - [ - spread attributes link] ( #--spread-attributes-link )
26+ - [ Class Components] ( #class-components )
27+ - [ - class counter] ( #--class-counter )
28+ - [ - with default props] ( #--with-default-props )
29+ - [ Generic Components] ( #generic-components )
30+ - [ - generic list] ( #--generic-list )
31+ - [ Render Props] ( #render-props )
32+ - [ - name provider] ( #--name-provider )
33+ - [ - mouse provider] ( #--mouse-provider )
34+ - [ Higher-Order Components] ( #higher-order-components )
35+ - [ - withState] ( #--withstate )
36+ - [ - withErrorBoundary] ( #--witherrorboundary )
37+ - [ Redux Connected Components] ( #redux-connected-components )
38+ - [ - redux connected counter] ( #--redux-connected-counter )
39+ - [ - redux connected counter with own props] ( #--redux-connected-counter-with-own-props )
40+ - [ - redux connected counter with ` redux-thunk ` integration] ( #--redux-connected-counter-with-redux-thunk-integration )
41+ - [ Context] ( #context )
42+ - [ ThemeContext] ( #themecontext )
43+ - [ ThemeProvider] ( #themeprovider )
44+ - [ ThemeConsumer] ( #themeconsumer )
45+ - [ ThemeConsumer in class component] ( #themeconsumer-in-class-component )
46+ - [ Hooks] ( #hooks )
47+ - [ - useState] ( #--usestate )
48+ - [ - useReducer] ( #--usereducer )
49+ - [ - useContext] ( #--usecontext )
50+ - [ Redux - Typing Patterns] ( #redux---typing-patterns )
51+ - [ Store Configuration] ( #store-configuration )
52+ - [ Create Global RootState and RootAction Types] ( #create-global-rootstate-and-rootaction-types )
53+ - [ ` RootState ` - type representing root state-tree] ( #rootstate---type-representing-root-state-tree )
54+ - [ ` RootAction ` - type representing union type of all action objects] ( #rootaction---type-representing-union-type-of-all-action-objects )
55+ - [ Create Store] ( #create-store )
56+ - [ Action Creators] ( #action-creators )
57+ - [ Reducers] ( #reducers )
58+ - [ State with Type-level Immutability] ( #state-with-type-level-immutability )
59+ - [ Caveat - ` Readonly ` is not recursive] ( #caveat---readonly-is-not-recursive )
60+ - [ Solution - recursive ` Readonly ` is called ` DeepReadonly ` ] ( #solution---recursive-readonly-is-called-deepreadonly )
61+ - [ Typing reducer] ( #typing-reducer )
62+ - [ Typing reducer with ` typesafe-actions ` ] ( #typing-reducer-with-typesafe-actions )
63+ - [ Testing reducer] ( #testing-reducer )
64+ - [ Async Flow with ` redux-observable ` ] ( #async-flow-with-redux-observable )
65+ - [ Typing epics] ( #typing-epics )
66+ - [ Testing epics] ( #testing-epics )
67+ - [ Selectors with ` reselect ` ] ( #selectors-with-reselect )
68+ - [ Connect with ` react-redux ` ] ( #connect-with-react-redux )
69+ - [ Typing connected component] ( #typing-connected-component )
70+ - [ Typing connected component using ` redux-thunk ` action creators] ( #typing-connected-component-using-redux-thunk-action-creators )
71+ - [ Configuration & Dev Tools] ( #configuration--dev-tools )
72+ - [ Common Npm Scripts] ( #common-npm-scripts )
73+ - [ TypeScript] ( #typescript )
74+ - [ tsconfig.json] ( #tsconfigjson )
75+ - [ TSLib] ( #tslib )
76+ - [ TSLint] ( #tslint )
77+ - [ tslint.json] ( #tslintjson )
78+ - [ ESLint] ( #eslint )
79+ - [ .eslintrc] ( #eslintrc )
80+ - [ Jest] ( #jest )
81+ - [ jest.config.json] ( #jestconfigjson )
82+ - [ jest.stubs.js] ( #jeststubsjs )
83+ - [ Style Guide] ( #style-guide )
84+ - [ "react-styleguidist"] ( #react-styleguidist )
85+ - [ Recipes] ( #recipes )
86+ - [ General Tips] ( #general-tips )
87+ - [ - should I still use React.PropTypes in TS?] ( #--should-i-still-use-reactproptypes-in-ts )
88+ - [ - when to use ` interface ` declarations and when ` type ` aliases?] ( #--when-to-use-interface-declarations-and-when-type-aliases )
89+ - [ - what's better default or named exports?] ( #--whats-better-default-or-named-exports )
90+ - [ - how to best initialize class instance or static properties?] ( #--how-to-best-initialize-class-instance-or-static-properties )
91+ - [ - how to best declare component handler functions?] ( #--how-to-best-declare-component-handler-functions )
92+ - [ Ambient Modules Tips] ( #ambient-modules-tips )
93+ - [ Imports in ambient modules] ( #imports-in-ambient-modules )
94+ - [ Type-Definitions Tips] ( #type-definitions-tips )
95+ - [ Missing type-definitions error] ( #missing-type-definitions-error )
96+ - [ Using custom ` d.ts ` files for npm modules] ( #using-custom-dts-files-for-npm-modules )
97+ - [ Type Augmentation Tips] ( #type-augmentation-tips )
98+ - [ Augmenting library internal declarations - using relative import] ( #augmenting-library-internal-declarations---using-relative-import )
99+ - [ Augmenting library public declarations - using node_modules import] ( #augmenting-library-public-declarations---using-node_modules-import )
100+ - [ Tutorials & Articles] ( #tutorials--articles )
101+ - [ Contributors] ( #contributors )
102+
103+ <!-- END doctoc generated TOC please keep comment here to allow auto update -->
104+
1105<div align =" center " >
2106
3107## React & Redux in TypeScript - Static Typing Guide
@@ -123,32 +227,32 @@ npm i -D @types/react @types/react-dom @types/react-redux
123227
124228# React - Type-Definitions Cheatsheet
125229
126- #### ` React.FunctionComponent<P > ` or ` React.FC<P > `
230+ #### ` React.FC<Props > ` or ` React.FunctionComponent<Props > `
127231Type representing a functional component
128232``` tsx
129233const : React .FC <Props > = ...
130234```
131235
132- #### ` React.Component<P, S > `
236+ #### ` React.Component<Props, State > `
133237Type representing a class component
134238``` tsx
135239class MyComponent extends React .Component <Props , State > { ...
136240` ` `
137241
138- #### ` React .ComponentProps <typeof Component >`
139- Gets type of Component Props, so you don't need to export Props from your component ever! (Works for both FC and Class components)
140- ` ` ` tsx
141- type MyComponentProps = React .ComponentProps < typeof MyComponent > ;
142- ` ` `
143-
144- #### ` React .ComponentType <P >`
145- Type representing union type of (React.FC | React.Component)
242+ #### ` React .ComponentType <Props >`
243+ Type representing union of (React.FC<Props> | React.Component<Props>) - used in HOC
146244` ` ` tsx
147245const withState = <P extends WrappedComponentProps >(
148246 WrappedComponent : React .ComponentType <P >,
149247) => { ...
150248` ` `
151249
250+ #### ` React .ComponentProps <typeof XXX >`
251+ Gets Props type of a specified component XXX (WARNING: does not work with statically declared default props and generic props)
252+ ` ` ` tsx
253+ type MyComponentProps = React .ComponentProps <typeof MyComponent >;
254+ ` ` `
255+
152256#### ` React .ReactElement ` or ` JSX .Element `
153257Type representing a concept of React Element - representation of a native DOM component (e.g. ` < div / > ` ), or a user-defined composite component (e.g. ` < MyComponent / > ` )
154258` ` ` tsx
@@ -163,21 +267,29 @@ const Component = ({ children: React.ReactNode }) => ...
163267` ` `
164268
165269#### ` React .CSSProperties `
166- Type representing style object in JSX (useful for css-in-js styles)
270+ Type representing style object in JSX - for css-in-js styles
167271` ` ` tsx
168272const : React .CSSProperties = { flexDirection: ' row' ...
169273const element = <div style = { styles } ...
170274```
171275
172- #### `React.ReactEventHandler<E>`
173- Type representing generic event handler
276+ #### `React.HTMLProps<HTMLXXXElement>`
277+ Type representing Props of specified HTML Element - for extending HTML Elements
278+ ```tsx
279+ const Input: React.FC<Props & React.HTMLProps<HTMLInputElement>> = props => { ... }
280+
281+ <Input about = { ... } accept = { ... } alt = { ... } ... />
282+ ` ` `
283+
284+ #### ` React .ReactEventHandler <HTMLXXXElement >`
285+ Type representing generic event handler - for declaring event handlers
174286` ` ` tsx
175287const handleChange : React .ReactEventHandler < HTMLInputElement > = (ev ) => { ... }
176288
177289<input onChange = { handleChange } ... />
178290` ` `
179291
180- #### ` React .MouseEvent <E >` | ` React .KeyboardEvent <E >` | ` React .TouchEvent <E >` etc...
292+ #### ` React .MouseEvent <HTMLXXXElement >` | ` React .KeyboardEvent <HTMLXXXElement >` | ` React .TouchEvent <HTMLXXXElement >` etc...
181293Type representing more specific event handler
182294` ` ` tsx
183295const handleChange = (ev : React .MouseEvent <HTMLDivElement >) => { ... }
0 commit comments