Relevant with TypeScript v2.3 (https://github.com/Microsoft/TypeScript/wiki/Roadmap)

Goals:

Table of Contents

React

Stateless Component

import*asReactfrom'react';typeProps={className?:string,style?:React.CSSProperties,};constMyComponent:React.StatelessComponent<Props>=(props)=>{const{ children, ...restProps}=props;return(<div{...restProps}>{children}</div>);};exportdefaultMyComponent;

Class Component

import*asReactfrom'react';typeProps={className?:string,style?:React.CSSProperties,initialCount?:number,};typeState={counter:number,};classMyComponentextendsReact.Component<Props,State>{// default props using Property InitializersstaticdefaultProps:Partial<Props>={className:'default-class',};// initial state using Property Initializersstate:State={counter:this.props.initialCount||0,};// lifecycle methods should be declared as normal instance methods and it's finecomponentDidMount(){// tslint:disable-next-line:no-consoleconsole.log('Mounted!');}// handlers using Class Fields with arrow functionsincreaseCounter=()=>{this.setState({counter:this.state.counter+1});};render(){const{ children, initialCount, ...restProps}=this.props;return(<div{...restProps}onClick={this.increaseCounter}>        Clicks:{this.state.counter}<hr/>{children}</div>);}}exportdefaultMyComponent;

Higher-Order Component

// controls/button.tsximport*asReactfrom'react';import{Button}from'antd';typeProps={className?:string,autoFocus?:boolean,htmlType?:typeofButton.prototype.props.htmlType,type?:typeofButton.prototype.props.type,};constButtonControl:React.StatelessComponent<Props>=(props)=>{const{ children, ...restProps}=props;return(<Button{...restProps}>{children}</Button>);};exportdefaultButtonControl;

// decorators/with-form-item.tsximport*asReactfrom'react';import{Form}from'antd';constFormItem=Form.Item;typeBaseProps={};typeHOCProps=FormItemProps&{error?:string;};typeFormItemProps={label?:typeofFormItem.prototype.props.label;labelCol?:typeofFormItem.prototype.props.labelCol;wrapperCol?:typeofFormItem.prototype.props.wrapperCol;required?:typeofFormItem.prototype.props.required;help?:typeofFormItem.prototype.props.help;validateStatus?:typeofFormItem.prototype.props.validateStatus;colon?:typeofFormItem.prototype.props.colon;};exportfunctionwithFormItem<WrappedComponentPropsextendsBaseProps>(WrappedComponent:React.StatelessComponent<WrappedComponentProps>|React.ComponentClass<WrappedComponentProps>,){constHOC:React.StatelessComponent<HOCProps&WrappedComponentProps>=(props)=>{const{        label, labelCol, wrapperCol, required, help, validateStatus, colon,        error, ...passThroughProps,}=propsasHOCProps;// filtering out empty decorator props in functional styleconstformItemProps:FormItemProps=Object.entries({        label, labelCol, wrapperCol, required, help, validateStatus, colon,}).reduce((definedProps:any,[key,value])=>{if(value!==undefined){definedProps[key]=value;}returndefinedProps;},{});// injecting additional props based on conditionif(error){formItemProps.help=error;formItemProps.validateStatus='error';}return(<FormItem{...formItemProps}hasFeedback={true}><WrappedComponent{...passThroughPropsasany}/></FormItem>);};returnHOC;}

// components/consumer-component.tsx...import{Button,Input}from'../controls';import{withFormItem,withFieldState}from'../decorators';// you can create more specialized components using decoratorsconstButtonField=withFormItem(Button);// you can leverage function composition to compose multiple decoratorsconstInputFieldWithState=withFormItem(withFieldState(Input));// Enhanced Component will inherit Props type from Base Component with all applied HOC's<ButtonFieldtype="primary"htmlType="submit"wrapperCol={{offset:4,span:12}}autoFocus={true}>  Next Step</ButtonField>...<InputFieldWithState{...formFieldLayout}label="Type"required={true}autoFocus={true}fieldState={configurationTypeFieldState}error={configurationTypeFieldState.error}/>...// you could use functional libraries like ramda or lodash to better functional composition like:constInputFieldWithState=compose(withFormItem,withFieldStateInput)(Input);// NOTE: be aware that compose function need to have sound type declarations or you'll lose type inference

Redux Connected Component

import{returntypeof}from'react-redux-typescript';import{RootState}from'../../store/types';import{increaseCounter,changeBaseCurrency}from'../../store/action-creators';import{getCurrencies}from'../../store/state/currency-rates/selectors';constmapStateToProps=(rootState:RootState)=>({counter:rootState.counter,baseCurrency:rootState.baseCurrency,currencies:getCurrencies(rootState),});constdispatchToProps={increaseCounter:increaseCounter,changeBaseCurrency:changeBaseCurrency,};// Props types inferred from mapStateToProps & dispatchToPropsconststateProps=returntypeof(mapStateToProps);typeProps=typeofstateProps&typeofdispatchToProps;classCurrencyConverterContainerextendsReact.Component<Props,{}>{handleInputBlur=(ev:React.FocusEvent<HTMLInputElement>)=>{constintValue=parseInt(ev.currentTarget.value,10);this.props.increaseCounter(intValue);// number}handleSelectChange=(ev:React.ChangeEvent<HTMLSelectElement>)=>{this.props.changeBaseCurrency(ev.target.value);// string}render(){const{ counter, baseCurrency, currencies}=this.props;// number, string, string[]return(<section><inputtype="text"value={counter}onBlur={handleInputBlur}.../><selectvalue={baseCurrency}onChange={handleSelectChange}...>{currencies.map(currency=><optionkey={currency}>{currency}</option>,)}</select>        ...</section>    );}}exportdefaultconnect(mapStateToProps,dispatchToProps)(CurrencyConverterContainer);

Redux

Actions

// Action TypesexportconstINCREASE_COUNTER='INCREASE_COUNTER';exportconstCHANGE_BASE_CURRENCY='CHANGE_BASE_CURRENCY';// Action CreatorsexportconstactionCreators={increaseCounter:()=>({type:INCREASE_COUNTERastypeofINCREASE_COUNTER,}),changeBaseCurrency:(payload:string)=>({type:CHANGE_BASE_CURRENCYastypeofCHANGE_BASE_CURRENCY, payload,}),}// Examplesstore.dispatch(actionCreators.increaseCounter(4));// Error: Supplied parameters do not match any signature of call target.store.dispatch(actionCreators.increaseCounter());// OK => { type: "INCREASE_COUNTER" }store.dispatch(actionCreators.changeBaseCurrency());// Error: Supplied parameters do not match any signature of call target.store.dispatch(actionCreators.changeBaseCurrency('USD'));// OK => { type: "CHANGE_BASE_CURRENCY", payload: 'USD' }

import{createActionCreator}from'react-redux-typescript';// Action CreatorsexportconstactionCreators={increaseCounter:createActionCreator('INCREASE_COUNTER'),// { type: "INCREASE_COUNTER" }changeBaseCurrency:createActionCreator('CHANGE_BASE_CURRENCY',(payload:string)=>payload),// { type: "CHANGE_BASE_CURRENCY", payload: string }showNotification:createActionCreator('SHOW_NOTIFICATION',(payload:string,meta?:{type:string})=>payload),};// Examplesstore.dispatch(actionCreators.increaseCounter(4));// Error: Supplied parameters do not match any signature of call target.store.dispatch(actionCreators.increaseCounter());// OK: { type: "INCREASE_COUNTER" }actionCreators.increaseCounter.type==="INCREASE_COUNTER"// truestore.dispatch(actionCreators.changeBaseCurrency());// Error: Supplied parameters do not match any signature of call target.store.dispatch(actionCreators.changeBaseCurrency('USD'));// OK: { type: "CHANGE_BASE_CURRENCY", payload: 'USD' }actionCreators.changeBaseCurrency.type==="CHANGE_BASE_CURRENCY"// truestore.dispatch(actionCreators.showNotification());// Error: Supplied parameters do not match any signature of call target.store.dispatch(actionCreators.showNotification('Hello!'));// OK: { type: "SHOW_NOTIFICATION", payload: 'Hello!' }store.dispatch(actionCreators.showNotification('Hello!',{type:'warning'}));// OK: { type: "SHOW_NOTIFICATION", payload: 'Hello!', meta: { type: 'warning' }}actionCreators.showNotification.type==="SHOW_NOTIFICATION"// true

Reducers

Declare reducerState type to achieve compile-time immutability

// 1a. use readonly modifier to mark state props as immutable and guard with compiler against any mutationsexporttypeState={readonlycounter:number,readonlybaseCurrency:string,};// 1b. if you prefer you can use `Readonly` mapped type as alternative conventionexporttypeStateAlternative=Readonly<{counter:number,baseCurrency:string,}>;// 2. declare initialState using State -> Note: only initialization is allowed with readonly modifiersexportconstinitialState:State={counter:0,baseCurrency:'EUR',};initialState.counter=3;// Error: Cannot assign to 'counter' because it is a constant or a read-only property

switch style reducer

import{Action}from'../../types';exportdefaultfunctionreducer(state:State=initialState,action:Action):State{switch(action.type){caseINCREASE_COUNTER:return{        ...state,counter:state.counter+1,// no payload};caseCHANGE_BASE_CURRENCY:return{        ...state,baseCurrency:action.payload,// payload: string};default:returnstate;}}

if's style reducer

import{Action}from'../../types';// Reducerexportdefaultfunctionreducer(state:State=initialState,action:Action):State{switch(action.type){caseactionCreators.increaseCounter.type:return{        ...state,counter:state.counter+1,// no payload};caseactionCreators.changeBaseCurrency.type:return{        ...state,baseCurrency:action.payload,// payload: string};default:returnstate;}}

Spread operation with Exact Types check to guard against excess or mismatched props

import{Action}from'../../types';// BADexportfunctionbadReducer(state:State=initialState,action:Action):State{if(action.type===INCREASE_COUNTER){return{      ...state,counterTypoError:state.counter+1,// OK};// it's a bug! but the compiler will not find it}}// GOODexportfunctiongoodReducer(state:State=initialState,action:Action):State{letpartialState:Partial<State>|undefined;if(action.type===INCREASE_COUNTER){partialState={counterTypoError:state.counter+1,// Error: Object literal may only specify known properties, and 'counterTypoError' does not exist in type 'Partial<State>'.};// now it's showing a typo error correctly}if(action.type===CHANGE_BASE_CURRENCY){partialState={// Error: Types of property 'baseCurrency' are incompatible. Type 'number' is not assignable to type 'string'.baseCurrency:5,};// type errors also works fine}returnpartialState!=null ?{ ...state, ...partialState} :state;}

Store Types

import{returntypeof}from'react-redux-typescript';import*asactionCreatorsfrom'./action-creators';constactions=Object.values(actionCreators).map(returntypeof);exporttypeAction=typeofactions[number];

import{reducerascurrencyRatesReducer,StateasCurrencyRatesState,}from'./state/currency-rates/reducer';import{reducerascurrencyConverterReducer,StateasCurrencyConverterState,}from'./state/currency-converter/reducer';exporttypeRootState={currencyRates:CurrencyRatesState;currencyConverter:CurrencyConverterState;};

Create Store

import{combineReducers,createStore}from'redux';import{RootState}from'../types';constrootReducer=combineReducers<RootState>({currencyRates:currencyRatesReducer,currencyConverter:currencyConverterReducer,});// rehydrating state on app start: implement here...constrecoverState=():RootState=>({}asRootState);exportconststore=createStore(rootReducer,recoverState(),);

declarevarwindow:Window&{devToolsExtension:any,__REDUX_DEVTOOLS_EXTENSION_COMPOSE__:any};import{createStore,compose,applyMiddleware}from'redux';import{combineEpics,createEpicMiddleware}from'redux-observable';import{epicsascurrencyConverterEpics}from'./currency-converter/epics';constrootEpic=combineEpics(currencyConverterEpics,);constepicMiddleware=createEpicMiddleware(rootEpic);constcomposeEnhancers=window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__||compose;// store singleton instanceexportconststore=createStore(rootReducer,recoverState(),composeEnhancers(applyMiddleware(epicMiddleware)),);

Ecosystem

Async Flow with "redux-observable"

import'rxjs/add/operator/map';import{combineEpics,Epic}from'redux-observable';import{RootState,Action}from'../types';// check store sectionimport{actionCreators}from'../reducer';import{convertValueWithBaseRateToTargetRate}from'./utils';import*ascurrencyConverterSelectorsfrom'./selectors';import*ascurrencyRatesSelectorsfrom'../currency-rates/selectors';constrecalculateTargetValueOnCurrencyChange:Epic<Action,RootState>=(action$,store)=>action$.ofType(actionCreators.changeBaseCurrency.type,actionCreators.changeTargetCurrency.type,).map((action:any)=>{constvalue=convertValueWithBaseRateToTargetRate(currencyConverterSelectors.getBaseValue(store.getState()),currencyRatesSelectors.getBaseCurrencyRate(store.getState()),currencyRatesSelectors.getTargetCurrencyRate(store.getState()),);returnactionCreators.recalculateTargetValue(value);});constrecalculateTargetValueOnBaseValueChange:Epic<Action,RootState>=(action$,store)=>action$.ofType(actionCreators.changeBaseValue.type,).map((action:any)=>{constvalue=convertValueWithBaseRateToTargetRate(action.payload,currencyRatesSelectors.getBaseCurrencyRate(store.getState()),currencyRatesSelectors.getTargetCurrencyRate(store.getState()),);returnactionCreators.recalculateTargetValue(value);});constrecalculateBaseValueOnTargetValueChange:Epic<Action,RootState>=(action$,store)=>action$.ofType(actionCreators.changeTargetValue.type,).map((action:any)=>{constvalue=convertValueWithBaseRateToTargetRate(action.payload,currencyRatesSelectors.getTargetCurrencyRate(store.getState()),currencyRatesSelectors.getBaseCurrencyRate(store.getState()),);returnactionCreators.recalculateBaseValue(value);});exportconstepics=combineEpics(recalculateTargetValueOnCurrencyChange,recalculateTargetValueOnBaseValueChange,recalculateBaseValueOnTargetValueChange,);

Selectors with "reselect"

import{createSelector}from'reselect';import{RootState}from'../types';constgetCurrencyConverter=(state:RootState)=>state.currencyConverter;constgetCurrencyRates=(state:RootState)=>state.currencyRates;exportconstgetCurrencies=createSelector(getCurrencyRates,(currencyRates)=>{returnObject.keys(currencyRates.rates).concat(currencyRates.base);},);exportconstgetBaseCurrencyRate=createSelector(getCurrencyConverter,getCurrencyRates,(currencyConverter,currencyRates)=>{constselectedBase=currencyConverter.baseCurrency;returnselectedBase===currencyRates.base      ?1 :currencyRates.rates[selectedBase];},);exportconstgetTargetCurrencyRate=createSelector(getCurrencyConverter,getCurrencyRates,(currencyConverter,currencyRates)=>{returncurrencyRates.rates[currencyConverter.targetCurrency];},);

Extras

tsconfig.json

{"compilerOptions":{"baseUrl":"src/",// enables relative imports to root"outDir":"out/",// target for compiled files"allowSyntheticDefaultImports":true,// no errors on commonjs default import"allowJs":true,// include js files"checkJs":true,// typecheck js files"declaration":false,// don't emit declarations"emitDecoratorMetadata":true,"experimentalDecorators":true,"forceConsistentCasingInFileNames":true,"importHelpers":true,// importing helper functions from tslib"noEmitHelpers":true,// disable emitting inline helper functions"jsx":"react",// process JSX"lib":["dom","es2016","es2017.object"],"target":"es5","module":"es2015","moduleResolution":"node","noEmitOnError":true,"noFallthroughCasesInSwitch":true,"noImplicitAny":true,"noImplicitReturns":true,"noImplicitThis":true,"strictNullChecks":true,"pretty":true,"removeComments":true,"sourceMap":true},"include":["src/**/*"],"exclude":["node_modules"]}

tslint.json

{"extends": ["tslint:latest","tslint-react"],"rules": {"arrow-parens":false,"arrow-return-shorthand": [false],"comment-format": [true,"check-space"],"import-blacklist": [true,"rxjs"],"interface-over-type-literal":false,"member-access":false,"member-ordering": [true, {"order":"statics-first"}],"newline-before-return":false,"no-any":false,"no-inferrable-types": [true],"no-import-side-effect": [true, {"ignore-module":"^rxjs/"}],"no-invalid-this": [true,"check-function-in-method"],"no-null-keyword":false,"no-require-imports":false,"no-switch-case-fall-through":true,"no-trailing-whitespace":true,"no-unused-variable": [true,"react"],"object-literal-sort-keys":false,"only-arrow-functions": [true,"allow-declarations"],"ordered-imports": [false],"prefer-method-signature":false,"prefer-template": [true,"allow-single-concat"],"quotemark": [true,"single","jsx-double"],"triple-equals": [true,"allow-null-check"],"typedef": [true,"parameter","property-declaration","member-variable-declaration"],"variable-name": [true,"ban-keywords","check-format","allow-pascal-case"]  }}

Default and Named Module Exports

// 1. in `components/` folder create component file (`select.tsx`) with default export:// components/select.tsxconstSelect:React.StatelessComponent<Props>=(props)=>{...exportdefaultSelect;// 2. in `components/` folder create `index.ts` file handling named imports:// components/index.tsexport{ defaultasSelect}from'./select';...// 3. now you can import your components in both ways like this:// containers/container.tsximport{ Select}from'../components';orimportSelectfrom'../components/select';...

Vendor Types Augmentation

declare module'../node_modules/antd/lib/input/Input'{exportinterfaceInputProps{autoFocus?:boolean;}}declare module'../node_modules/antd/lib/button/Button'{exportinterfaceButtonProps{autoFocus?:boolean;}}

FAQ

- how to install react & redux types?

// reactnpm i -D @types/react @types/react-dom @types/react-redux// redux has types included in it's npm package - don't install from @types

- should I still use React.PropTypes in TS?

- how to best initialize class instance or static properties?

classMyComponentextendsReact.Component<Props,State>{// default props using Property InitializersstaticdefaultProps:Props={className:'default-class',initialCount:0,};// initial state using Property Initializersstate:State={counter:this.props.initialCount,};  ...}

- how to best declare component handler functions?

classMyComponentextendsReact.Component<Props,State>{// handlers using Class Fields with arrow functionsincreaseCounter=()=>{this.setState({counter:this.state.counter+1});};  ...}

- differences betweeninterface declarations andtype aliases

Project Examples