Announcements

Introduction

Playground

Goals

Table of Contents

React

Stateless Components - SFC

stateless counter example

import*asReactfrom'react';exportinterfaceSFCCounterProps{label:string,count:number,onIncrement:()=>any,}exportconstSFCCounter:React.SFC<SFCCounterProps>=(props)=>{const{ label, count, onIncrement}=props;consthandleIncrement=()=>{onIncrement();};return(<div>{label}:{count}<buttontype="button"onClick={handleIncrement}>{`Increment`}</button></div>);};

spread attributes example

import*asReactfrom'react';exportinterfaceSFCSpreadAttributesProps{className?:string,style?:React.CSSProperties,}exportconstSFCSpreadAttributes:React.SFC<SFCSpreadAttributesProps>=(props)=>{const{ children, ...restProps}=props;return(<div{...restProps}>{children}</div>);};

Stateful Components - Class

stateful counter example

import*asReactfrom'react';exportinterfaceStatefulCounterProps{label:string,}typeState={count:number,};exportclassStatefulCounterextendsReact.Component<StatefulCounterProps,State>{state:State={count:0,};handleIncrement=()=>{this.setState({count:this.state.count+1});};render(){const{ handleIncrement}=this;const{ label}=this.props;const{ count}=this.state;return(<div>{label}:{count}<buttontype="button"onClick={handleIncrement}>{`Increment`}</button></div>);}}

stateful counter with default props example

import*asReactfrom'react';exportinterfaceStatefulCounterWithInitialCountProps{label:string,initialCount?:number,}interfaceDefaultProps{initialCount:number,}typePropsWithDefaults=StatefulCounterWithInitialCountProps&DefaultProps;interfaceState{count:number,}exportconstStatefulCounterWithInitialCount:React.ComponentClass<StatefulCounterWithInitialCountProps>=classextendsReact.Component<PropsWithDefaults,State>{// to make defaultProps strictly typed we need to explicitly declare their type//@see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11640staticdefaultProps:DefaultProps={initialCount:0,};state:State={count:this.props.initialCount,};componentWillReceiveProps({ initialCount}:PropsWithDefaults){if(initialCount!=null&&initialCount!==this.props.initialCount){this.setState({count:initialCount});}}handleIncrement=()=>{this.setState({count:this.state.count+1});};render(){const{ handleIncrement}=this;const{ label}=this.props;const{ count}=this.state;return(<div>{label}:{count}<buttontype="button"onClick={handleIncrement}>{`Increment`}</button></div>);}};

Generic Components

generic list component example

import*asReactfrom'react';exportinterfaceGenericListProps<T>{items:T[],itemRenderer:(item:T)=>JSX.Element,}exportclassGenericList<T>extendsReact.Component<GenericListProps<T>,{}>{render(){const{ items, itemRenderer}=this.props;return(<div>{items.map(itemRenderer)}</div>);}}

Connected Components

connected counter example - concise

import{connect}from'react-redux';import{RootState}from'@src/redux';import{actionCreators}from'@src/redux/counters';import{SFCCounter}from'@src/components';constmapStateToProps=(state:RootState)=>({count:state.counters.sfcCounter,});exportconstSFCCounterConnected=connect(mapStateToProps,{onIncrement:actionCreators.incrementSfc,})(SFCCounter);

connected counter example - verbose

import{bindActionCreators}from'redux';import{connect}from'react-redux';import{RootState,Dispatch}from'@src/redux';import{actionCreators}from'@src/redux/counters';import{SFCCounter}from'@src/components';constmapStateToProps=(state:RootState)=>({count:state.counters.sfcCounter,});constmapDispatchToProps=(dispatch:Dispatch)=>bindActionCreators({onIncrement:actionCreators.incrementSfc,},dispatch);exportconstSFCCounterConnectedVerbose=connect(mapStateToProps,mapDispatchToProps)(SFCCounter);

connected counter example - with own props

import{connect}from'react-redux';import{RootState}from'@src/redux';import{actionCreators}from'@src/redux/counters';import{SFCCounter}from'@src/components';exportinterfaceSFCCounterConnectedExtended{initialCount:number,}constmapStateToProps=(state:RootState,ownProps:SFCCounterConnectedExtended)=>({count:state.counters.sfcCounter,});exportconstSFCCounterConnectedExtended=connect(mapStateToProps,{onIncrement:actionCreators.incrementSfc,})(SFCCounter);

Higher-Order Components

basic hoc: enhance stateless counter with state

import*asReactfrom'react';import{Omit}from'@src/types/react-redux-typescript';interfaceRequiredProps{count:number,onIncrement:()=>any,}typeProps<TextendsRequiredProps>=Omit<T,keyofRequiredProps>;interfaceState{count:number,}exportfunctionwithState<WrappedComponentPropsextendsRequiredProps>(WrappedComponent:React.ComponentType<WrappedComponentProps>,){constHOC=classextendsReact.Component<Props<WrappedComponentProps>,State>{state:State={count:0,};handleIncrement=()=>{this.setState({count:this.state.count+1});};render(){const{ handleIncrement}=this;const{ count}=this.state;return(<WrappedComponentcount={count}onIncrement={handleIncrement}/>);}};returnHOC;}

advanced hoc: add error handling with componentDidCatch to view component

import*asReactfrom'react';constMISSING_ERROR='Error was swallowed during propagation.';interfaceProps{}interfaceState{error:Error|null|undefined,}interfaceWrappedComponentProps{onReset:()=>any,}exportfunctionwithErrorBoundary(WrappedComponent:React.ComponentType<WrappedComponentProps>,){constHOC=classextendsReact.Component<Props,State>{state:State={error:undefined,};componentDidCatch(error:Error|null,info:object){this.setState({error:error||newError(MISSING_ERROR)});this.logErrorToCloud(error,info);}logErrorToCloud=(error:Error|null,info:object)=>{// TODO: send error report to cloud}handleReset=()=>{this.setState({error:undefined});}render(){const{ children}=this.props;const{ error}=this.state;if(error){return(<WrappedComponentonReset={this.handleReset}/>);}returnchildrenasany;}};returnHOC;}

Redux

Actions

KISS Style

exportconstINCREMENT_SFC='INCREMENT_SFC';exportconstDECREMENT_SFC='DECREMENT_SFC';exporttypeActions={INCREMENT_SFC:{type:typeofINCREMENT_SFC,},DECREMENT_SFC:{type:typeofDECREMENT_SFC,},};// Action CreatorsexportconstactionCreators={incrementSfc:():Actions[typeofINCREMENT_SFC]=>({type:INCREMENT_SFC,}),decrementSfc:():Actions[typeofDECREMENT_SFC]=>({type:DECREMENT_SFC,}),};

DRY Style

import{createActionCreator}from'react-redux-typescript';typeSeverity='info'|'success'|'warning'|'error';// Action CreatorsexportconstactionCreators={incrementCounter:createActionCreator('INCREMENT_COUNTER'),showNotification:createActionCreator('SHOW_NOTIFICATION',(message:string,severity?:Severity)=>({ message, severity}),),};// Examplesstore.dispatch(actionCreators.incrementCounter(4));// Error: Expected 0 arguments, but got 1.store.dispatch(actionCreators.incrementCounter());// OK: { type: "INCREMENT_COUNTER" }actionCreators.incrementCounter.type==="INCREMENT_COUNTER"// 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: { message: 'Hello!' }}store.dispatch(actionCreators.showNotification('Hello!','info'));// OK: { type: "SHOW_NOTIFICATION", payload: { message: 'Hello!', severity: 'info }}actionCreators.showNotification.type==="SHOW_NOTIFICATION"// true

Reducers

Reducer State

exporttypeState={readonlycounter:number,};

exportconstinitialState:State={counter:0,};// OKinitialState.counter=3;// Error, cannot be mutated

Caveat: Readonly does not provide recursive immutability on objects

exporttypeState={readonlycounterContainer:{readonlyreadonlyCounter:number,mutableCounter:number,}};state.counterContainer={mutableCounter:1};// Error, cannot be mutatedstate.counterContainer.readonlyCounter=1;// Error, cannot be mutatedstate.counterContainer.mutableCounter=1;// No error, can be mutated

exporttypeState=Readonly<{countersCollection:ReadonlyArray<Readonly<{readonlyCounter1:number,readonlyCounter2:number,}>>,}>;state.countersCollection[0]={readonlyCounter1:1,readonlyCounter2:1};// Error, cannot be mutatedstate.countersCollection[0].readonlyCounter1=1;// Error, cannot be mutatedstate.countersCollection[0].readonlyCounter2=1;// Error, cannot be mutated

Reducer with classicconst types

import{combineReducers}from'redux';import{RootAction}from'@src/redux';import{INCREMENT_SFC,DECREMENT_SFC,}from'./';exporttypeState={readonlysfcCounter:number,};exportconstreducer=combineReducers<State,RootAction>({sfcCounter:(state=0,action)=>{switch(action.type){caseINCREMENT_SFC:returnstate+1;caseDECREMENT_SFC:returnstate+1;default:returnstate;}},});

Reducer with statictype property from helper factory function -createActionCreator

exportconstreducer:Reducer<State>=(state=0,action:RootAction)=>{switch(action.type){caseactionCreators.increment.type:returnstate+1;caseactionCreators.decrement.type:returnstate-1;default:returnstate;}};

Store Types

// RootActionsimport{RouterAction,LocationChangeAction}from'react-router-redux';import{ActionsasCountersActions}from'@src/redux/counters';import{ActionsasTodosActions}from'@src/redux/todos';import{ActionsasToastsActions}from'@src/redux/toasts';typeReactRouterAction=RouterAction|LocationChangeAction;exporttypeRootAction=|ReactRouterAction|CountersActions[keyofCountersActions]|TodosActions[keyofTodosActions]|ToastsActions[keyofToastsActions];

import{combineReducers}from'redux';import{routerReducerasrouter,RouterState}from'react-router-redux';import{reducerascounters,StateasCountersState}from'@src/redux/counters';import{reducerastodos,StateasTodosState}from'@src/redux/todos';interfaceStoreEnhancerState{}exportinterfaceRootStateextendsStoreEnhancerState{router:RouterState,counters:CountersState,todos:TodosState,}import{RootAction}from'@src/redux';exportconstrootReducer=combineReducers<RootState,RootAction>({  router,  counters,  todos,});

Create Store

import{createStore,applyMiddleware,compose}from'redux';import{createEpicMiddleware}from'redux-observable';import{rootReducer,rootEpic,RootState}from'@src/redux';constcomposeEnhancers=(process.env.NODE_ENV==='development'&&window&&window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__)||compose;functionconfigureStore(initialState?:RootState){// configure middlewaresconstmiddlewares=[createEpicMiddleware(rootEpic),];// compose enhancersconstenhancer=composeEnhancers(applyMiddleware(...middlewares),);// create storereturncreateStore<RootState>(rootReducer,initialState!,enhancer,);}// pass an optional param to rehydrate state on app startconststore=configureStore();// export store singleton instanceexportdefaultstore;

Ecosystem

Async Flow with "redux-observable"

// import rxjs operators somewhere...import{combineEpics,Epic}from'redux-observable';import{RootAction,RootState}from'@src/redux';import{saveState}from'@src/services/local-storage-service';constSAVING_DELAY=1000;// persist state in local storage every 1sconstsaveStateInLocalStorage:Epic<RootAction,RootState>=(action$,store)=>action$.debounceTime(SAVING_DELAY).do((action:RootAction)=>{// handle side-effectssaveState(store.getState());}).ignoreElements();exportconstepics=combineEpics(saveStateInLocalStorage,);

Selectors with "reselect"

import{createSelector}from'reselect';import{RootState}from'@src/redux';exportconstgetTodos=(state:RootState)=>state.todos.todos;exportconstgetTodosFilter=(state:RootState)=>state.todos.todosFilter;exportconstgetFilteredTodos=createSelector(getTodos,getTodosFilter,(todos,todosFilter)=>{switch(todosFilter){case'completed':returntodos.filter((t)=>t.completed);case'active':returntodos.filter((t)=>!t.completed);default:returntodos;}},);

Extras

tsconfig.json

{"compilerOptions":{"baseUrl":"./",// enables absolute path imports"paths":{// define absolute path mappings"@src/*":["src/*"]// will enable -> import { ... } from '@src/components'// in webpack you need to add -> resolve: { alias: { '@src': PATH_TO_SRC }}},"outDir":"dist/",// 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",// "es2015" for ES6+ engines"module":"commonjs",// "es2015" for tree-shaking"moduleResolution":"node","noEmitOnError":true,"noFallthroughCasesInSwitch":true,"noImplicitAny":true,"noImplicitReturns":true,"noImplicitThis":true,"noUnusedLocals":true,"strictNullChecks":true,"pretty":true,"removeComments":true,"sourceMap":true},"include":["src/**/*"],"exclude":["node_modules","src/**/*.spec.*"]}

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,"max-line-length": [true,120],"member-access":false,"member-ordering": [true, {"order":"fields-first"    }],"newline-before-return":false,"no-any":false,"no-empty-interface":false,"no-inferrable-types": [true,"ignore-params","ignore-properties"],"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-this-assignment": [true, {"allow-destructuring":true    }],"no-unused-variable": [true,"react"],"object-literal-sort-keys":false,"object-literal-shorthand":false,"one-variable-per-declaration": [false],"only-arrow-functions": [true,"allow-declarations"],"ordered-imports": [false],"prefer-method-signature":false,"prefer-template": [true,"allow-single-concat"],"semicolon": [true,"ignore-interfaces"],"quotemark": [true,"single","jsx-double"],"triple-equals": [true,"allow-null-check"],"typedef": [true,"parameter","property-declaration"],"variable-name": [true,"ban-keywords","check-format","allow-pascal-case","allow-leading-underscore"]  }}

Default and Named Module Exports

// 1. in `components/` folder create component file (`select.tsx`) with default export:// components/select.tsxconstSelect:React.SFC<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 named (internal) or default (public):// containers/container.tsximport{ Select}from'@src/components';orimportSelectfrom'@src/components/select';...

Fixing Vendor Type Issues

// added missing autoFocus Prop on Input component in "antd@2.10.0" npm packagedeclare module'../node_modules/antd/lib/input/Input'{exportinterfaceInputProps{autoFocus?:boolean;}}

// fixed broken public type declaration in "rxjs@5.4.1" npm packageimport{Operator}from'rxjs/Operator';import{Observable}from'rxjs/Observable';declare module'rxjs/Subject'{interfaceSubject<T>{lift<R>(operator:Operator<T,R>):Observable<R>;}}

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?

- when to useinterface declarations and whentype aliases?

- how to best initialize class instance or static properties?

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

- how to best declare component handler functions?

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

Project Examples