Basic Cheatsheet

Basic Cheatsheet Table of Contents

Section 1: Setup

Prerequisites

React and TypeScript starter kits

Try React and TypeScript online

Section 2: Getting Started

Function Components

// Declaring type of props - see "Typing Component Props" for more examplestypeAppProps={message:string;};/* use `interface` if exporting so that consumers can extend */// Easiest way to declare a Function Component; return type is inferred.constApp=({ message}:AppProps)=><div>{message}</div>;// You can choose to annotate the return type so an error is raised if you accidentally return some other typeconstApp=({ message}:AppProps):React.JSX.Element=><div>{message}</div>;// You can also inline the type declaration; eliminates naming the prop types, but looks repetitiveconstApp=({ message}:{message:string})=><div>{message}</div>;// Alternatively, you can use `React.FunctionComponent` (or `React.FC`), if you prefer.// With latest React types and TypeScript 5.1. it's mostly a stylistic choice, otherwise discouraged.constApp:React.FunctionComponent<{message:string}>=({ message})=>(<div>{message}</div>);// orconstApp:React.FC<AppProps>=({ message})=><div>{message}</div>;

Hooks

useState

const[state,setState]=useState(false);// `state` is inferred to be a boolean// `setState` only takes booleans

const[user,setUser]=useState<User|null>(null);// later...setUser(newUser);

const[user,setUser]=useState<User>({}asUser);// later...setUser(newUser);

useCallback

constmemoizedCallback=useCallback((param1:string,param2:number)=>{console.log(param1,param2)return{ok:true}},[...],);/** * VSCode will show the following type: * const memoizedCallback: *  (param1: string, param2: number) => { ok: boolean } */

functionuseCallback<Textends(...args:any[])=>any>(callback:T,deps:DependencyList):T;

functionuseCallback<TextendsFunction>(callback:T,deps:DependencyList):T;

//@ts-expect-error Parameter 'e' implicitly has 'any' type.useCallback((e)=>{},[]);// Explicit 'any' type.useCallback((e:any)=>{},[]);

useReducer

import{useReducer}from"react";constinitialState={count:0};typeACTIONTYPE=|{type:"increment";payload:number}|{type:"decrement";payload:string};functionreducer(state:typeofinitialState,action:ACTIONTYPE){switch(action.type){case"increment":return{count:state.count+action.payload};case"decrement":return{count:state.count-Number(action.payload)};default:thrownewError();}}functionCounter(){const[state,dispatch]=useReducer(reducer,initialState);return(<>      Count:{state.count}<buttononClick={()=>dispatch({type:"decrement",payload:"5"})}>        -</button><buttononClick={()=>dispatch({type:"increment",payload:5})}>        +</button></>);}

useEffect / useLayoutEffect

functionDelayedEffect(props:{timerMs:number}){const{ timerMs}=props;useEffect(()=>setTimeout(()=>{/* do stuff */},timerMs),[timerMs]);// bad example! setTimeout implicitly returns a number// because the arrow function body isn't wrapped in curly bracesreturnnull;}

useRef

Option 1: DOM element ref

functionFoo(){// - If possible, prefer as specific as possible. For example, HTMLDivElement//   is better than HTMLElement and way better than Element.// - Technical-wise, this returns RefObject<HTMLDivElement>constdivRef=useRef<HTMLDivElement>(null);useEffect(()=>{// Note that ref.current may be null. This is expected, because you may// conditionally render the ref-ed element, or you may forget to assign itif(!divRef.current)throwError("divRef is not assigned");// Now divRef.current is sure to be HTMLDivElementdoSomethingWith(divRef.current);});// Give the ref to an element so React can manage it for youreturn<divref={divRef}>etc</div>;}

constdivRef=useRef<HTMLDivElement>(null!);// Later... No need to check if it is nulldoSomethingWith(divRef.current);

Option 2: Mutable value ref

functionFoo(){// Technical-wise, this returns MutableRefObject<number | null>constintervalRef=useRef<number|null>(null);// You manage the ref yourself (that's why it's called MutableRefObject!)useEffect(()=>{intervalRef.current=setInterval(...);return()=>clearInterval(intervalRef.current);},[]);// The ref is not passed to any element's "ref" propreturn<buttononClick={/* clearInterval the ref */}>Cancel timer</button>;}

See also

useImperativeHandle

// Countdown.tsx// Define the handle types which will be passed to the forwardRefexporttypeCountdownHandle={start:()=>void;};typeCountdownProps={};constCountdown=forwardRef<CountdownHandle,CountdownProps>((props,ref)=>{useImperativeHandle(ref,()=>({// start() has type inference herestart(){alert("Start");},}));return<div>Countdown</div>;});

// The component uses the Countdown componentimportCountdown,{CountdownHandle}from"./Countdown.tsx";functionApp(){constcountdownEl=useRef<CountdownHandle>(null);useEffect(()=>{if(countdownEl.current){// start() has type inference here as wellcountdownEl.current.start();}},[]);return<Countdownref={countdownEl}/>;}

See also:

Custom Hooks

import{useState}from"react";exportfunctionuseLoading(){const[isLoading,setState]=useState(false);constload=(aPromise:Promise<any>)=>{setState(true);returnaPromise.finally(()=>setState(false));};return[isLoading,load]asconst;// infers [boolean, typeof load] instead of (boolean | typeof load)[]}

More Hooks + TypeScript reading:

Example React Hooks + TypeScript Libraries:

Class Components

typeMyProps={// using `interface` is also okmessage:string;};typeMyState={count:number;// like this};classAppextendsReact.Component<MyProps,MyState>{state:MyState={// optional second annotation for better type inferencecount:0,};render(){return(<div>{this.props.message}{this.state.count}</div>);}}

classAppextendsReact.Component<{message:string},{count:number}>{state={count:0};render(){return(<divonClick={()=>this.increment(1)}>{this.props.message}{this.state.count}</div>);}increment=(amt:number)=>{// like thisthis.setState((state)=>({count:state.count+amt,}));};}

classAppextendsReact.Component<{message:string;}>{pointer:number;// like thiscomponentDidMount(){this.pointer=3;}render(){return(<div>{this.props.message} and{this.pointer}</div>);}}

Typing getDerivedStateFromProps

classCompextendsReact.Component<Props,State>{staticgetDerivedStateFromProps(props:Props,state:State):Partial<State>|null{//}}

classCompextendsReact.Component<Props,ReturnType<typeofComp["getDerivedStateFromProps"]>>{staticgetDerivedStateFromProps(props:Props){}}

typeCustomValue=any;interfaceProps{propA:CustomValue;}interfaceDefinedState{otherStateField:string;}typeState=DefinedState&ReturnType<typeoftransformPropsToState>;functiontransformPropsToState(props:Props){return{savedPropA:props.propA,// save for memoizationderivedState:props.propA,};}classCompextendsReact.PureComponent<Props,State>{constructor(props:Props){super(props);this.state={otherStateField:"123",      ...transformPropsToState(props),};}staticgetDerivedStateFromProps(props:Props,state:State){if(isEqual(props.propA,state.savedPropA))returnnull;returntransformPropsToState(props);}}

You May Not NeeddefaultProps

typeGreetProps={age?:number};constGreet=({ age=21}:GreetProps)=>// etc

typeGreetProps={age?:number;};classGreetextendsReact.Component<GreetProps>{render(){const{ age=21}=this.props;/*...*/}}letel=<Greetage={3}/>;

TypingdefaultProps

// using typeof as a shortcut; note that it hoists!// you can also declare the type of DefaultProps if you choose// e.g. https://github.com/typescript-cheatsheets/react/issues/415#issuecomment-841223219typeGreetProps={age:number}&typeofdefaultProps;constdefaultProps={age:21,};constGreet=(props:GreetProps)=>{// etc};Greet.defaultProps=defaultProps;

typeGreetProps=typeofGreet.defaultProps&{age:number;};classGreetextendsReact.Component<GreetProps>{staticdefaultProps={age:21,};/*...*/}// Type-checks! No type assertions needed!letel=<Greetage={3}/>;

Consuming Props of a Component with defaultProps

Problem Statement

interfaceIProps{name:string;}constdefaultProps={age:25,};constGreetComponent=({ name, age}:IProps&typeofdefaultProps)=>(<div>{`Hello, my name is${name},${age}`}</div>);GreetComponent.defaultProps=defaultProps;constTestComponent=(props:React.ComponentProps<typeofGreetComponent>)=>{return<h1/>;};// Property 'age' is missing in type '{ name: string; }' but required in type '{ age: number; }'constel=<TestComponentname="foo"/>;

Solution

typeComponentProps<T>=Textends|React.ComponentType<inferP>|React.Component<inferP>  ?React.JSX.LibraryManagedAttributes<T,P>  :never;constTestComponent=(props:ComponentProps<typeofGreetComponent>)=>{return<h1/>;};// No errorconstel=<TestComponentname="foo"/>;

Misc Discussions and Knowledge

Typing Component Props

Basic Prop Types Examples

typeAppProps={message:string;count:number;disabled:boolean;/** array of a type! */names:string[];/** string literals to specify exact string values, with a union type to join them together */status:"waiting"|"success";/** an object with known properties (but could have more at runtime) */obj:{id:string;title:string;};/** array of objects! (common) */objArr:{id:string;title:string;}[];/** any non-primitive value - can't access any properties (NOT COMMON but useful as placeholder) */obj2:object;/** an interface with no required properties - (NOT COMMON, except for things like `React.Component<{}, State>`) */obj3:{};/** a dict object with any number of properties of the same type */dict1:{[key:string]:MyTypeHere;};dict2:Record<string,MyTypeHere>;// equivalent to dict1/** function that doesn't take or return anything (VERY COMMON) */onClick:()=>void;/** function with named prop (VERY COMMON) */onChange:(id:number)=>void;/** function type syntax that takes an event (VERY COMMON) */onChange:(event:React.ChangeEvent<HTMLInputElement>)=>void;/** alternative function type syntax that takes an event (VERY COMMON) */onClick(event:React.MouseEvent<HTMLButtonElement>):void;/** any function as long as you don't invoke it (not recommended) */onSomething:Function;/** an optional prop (VERY COMMON!) */optional?:OptionalType;/** when passing down the state setter function returned by `useState` to a child component. `number` is an example, swap out with whatever the type of your state */setState:React.Dispatch<React.SetStateAction<number>>;};

object as the non-primitive type

Empty interface,{} andObject

interfaceAnyNonNullishValue{}// equivalent to `type AnyNonNullishValue = {}` or `type AnyNonNullishValue = Object`letvalue:AnyNonNullishValue;// these are all fine, but might not be expectedvalue=1;value="foo";value=()=>alert("foo");value={};value={foo:"bar"};// these are errorsvalue=undefined;value=null;

Useful React Prop Type Examples

exportdeclareinterfaceAppProps{children?:React.ReactNode;// best, accepts everything React can renderchildrenElement:React.JSX.Element;// A single React elementstyle?:React.CSSProperties;// to pass through style propsonChange?:React.FormEventHandler<HTMLInputElement>;// form events! the generic parameter is the type of event.target//  more info: https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase/#wrappingmirroringprops:Props&React.ComponentPropsWithoutRef<"button">;// to impersonate all the props of a button element and explicitly not forwarding its refprops2:Props&React.ComponentPropsWithRef<MyButtonWithForwardRef>;// to impersonate all the props of MyButtonForwardedRef and explicitly forwarding its ref}

Types or Interfaces?

TL;DR

More Advice

Useful table for Types vs Interfaces

getDerivedStateFromProps

classCompextendsReact.Component<Props,State>{staticgetDerivedStateFromProps(props:Props,state:State):Partial<State>|null{//}}

classCompextendsReact.Component<Props,ReturnType<typeofComp["getDerivedStateFromProps"]>>{staticgetDerivedStateFromProps(props:Props){}}

typeCustomValue=any;interfaceProps{propA:CustomValue;}interfaceDefinedState{otherStateField:string;}typeState=DefinedState&ReturnType<typeoftransformPropsToState>;functiontransformPropsToState(props:Props){return{savedPropA:props.propA,// save for memoizationderivedState:props.propA,};}classCompextendsReact.PureComponent<Props,State>{constructor(props:Props){super(props);this.state={otherStateField:"123",      ...transformPropsToState(props),};}staticgetDerivedStateFromProps(props:Props,state:State){if(isEqual(props.propA,state.savedPropA))returnnull;returntransformPropsToState(props);}}

Forms and Events

constel=(<buttononClick={(event)=>{/* event will be correctly typed automatically! */}}/>);

typeState={text:string;};classAppextendsReact.Component<Props,State>{state={text:"",};// typing on RIGHT hand side of =onChange=(e:React.FormEvent<HTMLInputElement>):void=>{this.setState({text:e.currentTarget.value});};render(){return(<div><inputtype="text"value={this.state.text}onChange={this.onChange}/></div>);}}

// typing on LEFT hand side of =  onChange:React.ChangeEventHandler<HTMLInputElement>=(e)=>{this.setState({text:e.currentTarget.value})}

<formref={formRef}onSubmit={(e:React.SyntheticEvent)=>{e.preventDefault();consttarget=e.targetastypeofe.target&{email:{value:string};password:{value:string};};constemail=target.email.value;// typechecks!constpassword=target.password.value;// typechecks!// etc...}}><div><label>      Email:<inputtype="email"name="email"/></label></div><div><label>      Password:<inputtype="password"name="password"/></label></div><div><inputtype="submit"value="Log in"/></div></form>

List of event types

Context

Basic example

import{createContext}from"react";typeThemeContextType="light"|"dark";constThemeContext=createContext<ThemeContextType>("light");

import{useState}from"react";constApp=()=>{const[theme,setTheme]=useState<ThemeContextType>("light");return(<ThemeContext.Providervalue={theme}><MyComponent/></ThemeContext.Provider>);};

import{useContext}from"react";constMyComponent=()=>{consttheme=useContext(ThemeContext);return<p>The current theme is{theme}.</p>;};

Without default context value

import{createContext}from"react";interfaceCurrentUserContextType{username:string;}constCurrentUserContext=createContext<CurrentUserContextType|null>(null);

constApp=()=>{const[currentUser,setCurrentUser]=useState<CurrentUserContextType>({username:"filiptammergard",});return(<CurrentUserContext.Providervalue={currentUser}><MyComponent/></CurrentUserContext.Provider>);};

import{useContext}from"react";constMyComponent=()=>{constcurrentUser=useContext(CurrentUserContext);return<p>Name:{currentUser?.username}.</p>;};

import{createContext}from"react";interfaceCurrentUserContextType{username:string;}constCurrentUserContext=createContext<CurrentUserContextType|null>(null);constuseCurrentUser=()=>{constcurrentUserContext=useContext(CurrentUserContext);if(!currentUserContext){thrownewError("useCurrentUser has to be used within <CurrentUserContext.Provider>");}returncurrentUserContext;};

import{useContext}from"react";constMyComponent=()=>{constcurrentUser=useCurrentUser();return<p>Username:{currentUser.username}.</p>;};

Type assertion as an alternative

import{useContext}from"react";constMyComponent=()=>{constcurrentUser=useContext(CurrentUserContext);return<p>Name:{currentUser!.username}.</p>;};

constCurrentUserContext=createContext<CurrentUserContextType>({}asCurrentUserContextType);

constCurrentUserContext=createContext<CurrentUserContextType>(null!);

forwardRef/createRef

import{createRef,PureComponent}from"react";classCssThemeProviderextendsPureComponent<Props>{privaterootRef=createRef<HTMLDivElement>();// like thisrender(){return<divref={this.rootRef}>{this.props.children}</div>;}}

import{forwardRef,ReactNode}from"react";interfaceProps{children?:ReactNode;type:"submit"|"button";}exporttypeRef=HTMLButtonElement;exportconstFancyButton=forwardRef<Ref,Props>((props,ref)=>(<buttonref={ref}className="MyClassName"type={props.type}>{props.children}</button>));

Generic forwardRefs

Option 1 - Wrapper component

typeClickableListProps<T>={items:T[];onSelect:(item:T)=>void;mRef?:React.Ref<HTMLUListElement>|null;};exportfunctionClickableList<T>(props:ClickableListProps<T>){return(<ulref={props.mRef}>{props.items.map((item,i)=>(<likey={i}><buttononClick={(el)=>props.onSelect(item)}>Select</button>{item}</li>))}</ul>);}

Option 2 - Redeclare forwardRef

// Redeclare forwardRefdeclare module"react"{functionforwardRef<T,P={}>(render:(props:P,ref:React.Ref<T>)=>React.ReactElement|null):(props:P&React.RefAttributes<T>)=>React.ReactElement|null;}// Just write your components like you're used to!import{forwardRef,ForwardedRef}from"react";interfaceClickableListProps<T>{items:T[];onSelect:(item:T)=>void;}functionClickableListInner<T>(props:ClickableListProps<T>,ref:ForwardedRef<HTMLUListElement>){return(<ulref={ref}>{props.items.map((item,i)=>(<likey={i}><buttononClick={(el)=>props.onSelect(item)}>Select</button>{item}</li>))}</ul>);}exportconstClickableList=forwardRef(ClickableListInner);

Option 3 - Call signature

// Add to `index.d.ts`interfaceForwardRefWithGenericsextendsReact.FC<WithForwardRefProps<Option>>{<TextendsOption>(props:WithForwardRefProps<T>):ReturnType<React.FC<WithForwardRefProps<T>>>;}exportconstClickableListWithForwardRef:ForwardRefWithGenerics=forwardRef(ClickableList);

More Info

Portals

constmodalRoot=document.getElementById("modal-root")asHTMLElement;// assuming in your html file has a div with id 'modal-root';exportclassModalextendsReact.Component<{children?:React.ReactNode}>{el:HTMLElement=document.createElement("div");componentDidMount(){modalRoot.appendChild(this.el);}componentWillUnmount(){modalRoot.removeChild(this.el);}render(){returnReactDOM.createPortal(this.props.children,this.el);}}

import{useState}from"react";functionApp(){const[showModal,setShowModal]=useState(false);return(<div>      // you can also put this in your static html file<divid="modal-root"></div>{showModal&&(<Modal><divstyle={{display:"grid",placeItems:"center",height:"100vh",width:"100vh",background:"rgba(0,0,0,0.1)",zIndex:99,}}>            I'm a modal!{" "}<buttonstyle={{background:"papyawhip"}}onClick={()=>setShowModal(false)}>              close</button></div></Modal>)}<buttononClick={()=>setShowModal(true)}>show Modal</button>      // rest of your app</div>);}

Error Boundaries

Option 1: Using react-error-boundary

Option 2: Writing your custom error boundary component

importReact,{Component,ErrorInfo,ReactNode}from"react";interfaceProps{children?:ReactNode;}interfaceState{  hasError:boolean;}classErrorBoundaryextendsComponent<Props,State>{publicstate:State={hasError:false};publicstaticgetDerivedStateFromError(_:Error):State{// Update state so the next render will show the fallback UI.return{hasError:true};}publiccomponentDidCatch(error:Error,errorInfo:ErrorInfo){console.error("Uncaught error:",error,errorInfo);}publicrender(){if(this.state.hasError){return<h1>Sorry.. there was an error</h1>;}returnthis.props.children;}}exportdefaultErrorBoundary;

Concurrent React/React Suspense

Troubleshooting Handbook: Types

Union Types and Type Guarding

classAppextendsReact.Component<{},{count:number|null;// like this}>{state={count:null,};render(){return<divonClick={()=>this.increment(1)}>{this.state.count}</div>;}increment=(amt:number)=>{this.setState((state)=>({count:(state.count||0)+amt,}));};}

interfaceAdmin{role:string;}interfaceUser{email:string;}// Method 1: use `in` keywordfunctionredirect(user:Admin|User){if("role"inuser){// use the `in` operator for typeguards since TS 2.7+routeToAdminPage(user.role);}else{routeToHomePage(user.email);}}// Method 2: custom type guard, does the same thing in older TS versions or where `in` isnt enoughfunctionisAdmin(user:Admin|User):user isAdmin{return(userasany).role!==undefined;}

Optional Types

classMyComponentextendsReact.Component<{message?:string;// like this}>{render(){const{ message="default"}=this.props;return<div>{message}</div>;}}

Enum Types

exportdeclaretypePosition="left"|"right"|"top"|"bottom";

exportenumButtonSizes{default="default",small="small",large="large",}// usageexportconstPrimaryButton=(props:Props&React.HTMLProps<HTMLButtonElement>)=><Buttonsize={ButtonSizes.default}{...props}/>;

Type Assertion

classMyComponentextendsReact.Component<{message:string;}>{render(){const{ message}=this.props;return(<Component2message={messageasSpecialMessageType}>{message}</Component2>);}}

element.parentNode!.removeChild(element);// ! before the periodmyFunction(document.getElementById(dialog.id!)!);// ! after the property accessingletuserID!:string;// definite assignment assertion... be careful!

Simulating Nominal Types

typeOrderID=string&{readonlybrand:unique symbol};typeUserID=string&{readonlybrand:unique symbol};typeID=OrderID|UserID;

functionOrderID(id:string){returnidasOrderID;}functionUserID(id:string){returnidasUserID;}

functionqueryForUser(id:UserID){// ...}queryForUser(OrderID("foobar"));// Error, Argument of type 'OrderID' is not assignable to parameter of type 'UserID'

Intersection Types

exportinterfacePrimaryButtonProps{label:string;}exportconstPrimaryButton=(props:PrimaryButtonProps&React.ButtonHTMLAttributes<HTMLButtonElement>)=>{// do custom buttony stuffreturn<button{...props}>{props.label}</button>;};

typeBaseProps={className?:string,style?:React.CSSPropertiesname:string// used in both}typeDogProps={tailsCount:number}typeHumanProps={handsCount:number}exportconstHuman=(props:BaseProps&HumanProps)=>// ...exportconstDog=(props:BaseProps&DogProps)=>// ...

Union Types

Overloading Function Types

typeFunctionType1=(x:string,y:number)=>number;

functionpickCard(x:{suit:string;card:number}[]):number;functionpickCard(x:number):{suit:string;card:number};functionpickCard(x):any{// implementation with combined signature// ...}

typepickCard={(x:{suit:string;card:number}[]):number;(x:number):{suit:string;card:number};// no need for combined signature in this form// you can also type static properties of functions here eg `pickCard.wasCalled`};

Using Inferred Types

const[state,setState]=useState({foo:1,bar:2,});// state's type inferred to be {foo: number, bar: number}constsomeMethod=(obj:typeofstate)=>{// grabbing the type of state even though it was inferred// some code using objsetState(obj);// this works};

Using Partial Types

const[state,setState]=useState({foo:1,bar:2,});// state's type inferred to be {foo: number, bar: number}// NOTE: stale state merging is not actually encouraged in useState// we are just demonstrating how to use Partial hereconstpartialStateUpdate=(obj:Partial<typeofstate>)=>setState({ ...state, ...obj});// later on...partialStateUpdate({foo:2});// this works

The Types I need weren't exported!

import{Button}from"library";// but doesn't export ButtonProps! oh no!typeButtonProps=React.ComponentProps<typeofButton>;// no problem! grab your own!typeAlertButtonProps=Omit<ButtonProps,"onClick">;// modifyconstAlertButton=(props:AlertButtonProps)=>(<ButtononClick={()=>alert("hello")}{...props}/>);

// inside some library - return type { baz: number } is inferred but not exportedfunctionfoo(bar:string){return{baz:1};}//  inside your app, if you need { baz: number }typeFooReturn=ReturnType<typeoffoo>;// { baz: number }

functionfoo(){return{a:1,b:2,subInstArr:[{c:3,d:4,},],};}typeInstType=ReturnType<typeoffoo>;typeSubInstArr=InstType["subInstArr"];typeSubInstType=SubInstArr[0];letbaz:SubInstType={c:5,d:6,// type checks ok!};//You could just write a one-liner,//But please make sure it is forward-readable//(you can understand it from reading once left-to-right with no jumps)typeSubInstType2=ReturnType<typeoffoo>["subInstArr"][0];letbaz2:SubInstType2={c:5,d:6,// type checks ok!};

The Types I need don't exist!

Slappingany on everything

// inside tsconfig.json{// ..."include": ["src"// automatically resolves if the path to declaration is src/typedec.d.ts  ]// ...}

// inside typedec.d.tsdeclare module"my-untyped-module";

Autogenerate types

npm install -g dts-gendts-gen -m<your-module>

Typing Exported Hooks

// ...constuseUntypedHook=(prop)=>{// some processing happens herereturn{/* ReturnProps */};};exportdefaultuseUntypedHook;

declare module'use-untyped-hook'{exportinterfaceInputProps{ ...}// type declaration for propexportinterfaceReturnProps{ ...}// type declaration for return propsexportdefaultfunctionuseUntypedHook(prop:InputProps// ...):ReturnProps;}

Typing Exported Components

declare module"react-router-dom"{import*asReactfrom'react';// ...typeNavigateProps<T>={to:string|number,replace?:boolean,state?:T}//...exportclassNavigate<T=any>extendsReact.Component<NavigateProps<T>>{}// ...

Frequent Known Problems with TypeScript

TypeScript doesn't narrow after an object element null check

TypeScript doesn't let you restrict the type of children

<Menu><MenuItem/>{/* ok */}<MenuLink/>{/* ok */}<div>{/* error */}</Menu>

Troubleshooting Handbook: Operators

Troubleshooting Handbook: Utilities

Troubleshooting Handbook: tsconfig.json

{"compilerOptions": {"incremental":true,"outDir":"build/lib","target":"es5","module":"esnext","lib": ["DOM","ESNext"],"sourceMap":true,"importHelpers":true,"declaration":true,"rootDir":"src","strict":true,"noUnusedLocals":true,"noUnusedParameters":true,"noImplicitReturns":true,"noFallthroughCasesInSwitch":true,"allowJs":false,"jsx":"react","moduleResolution":"node","baseUrl":"src","forceConsistentCasingInFileNames":true,"esModuleInterop":true,"suppressImplicitAnyIndexErrors":true,"allowSyntheticDefaultImports":true,"experimentalDecorators":true  },"include": ["src/**/*"],"exclude": ["node_modules","build","scripts"]}