React + Typescript Cheatsheet

Setup

If you use atom... download & install the following packages:

What are Typescript type definition files? (*.d.ts)

You may see a folder called typings with a lot of files that follow the pattern *.d.ts. These are type definition files. Type definition files are used to declare the interfaces of public API of third party libraries like jQuery or React. That way you don't have to create all the typings for third party libraries!

How do you create a React component with Typescript?

Create a file using the .tsx extention
Declare the interface for any props that that the React Component uses

interface TodoProps {
    todo: string
    status: string
}

Declare the interface for any state that exists within the React component

interface TodoState {
    isEditing?: boolean
    // Make all state optional! See Hack below
}

Hack: For now make every key in state optional or else Typescript with throw an error

Create a React component using the interfaces you created

class TodoComponent extends React.Component<TodoProps, TodoState> {
    
    state: TodoState = { ... } // initial state
    
    ... // public + react methods
}

Misc

Children

To access this.props.children, your prop interface needs to extend React.Props<...>:

  interface TodoProps extends React.Props<TodoComponent> {
    isEditing?: boolean
    ... // The TodoComponent argument to React.Props above is the type of the component that is going to be returned from the ref callback.
  }

  class TodoComponent extends React.Component<TodoProps, {}> {
    ... // public + react methods
  }

OR, you can define the children type directly on the props - nothing wrong with that:

interface TodoProps {
  children?: React.ReactNode
}

Refs

You should avoid using string refs and instead declare an instance variable and assign to it using the ref callback.

class Cat extends <CatProps, {}> { // no state
    
  litterBox: HTMLInputElement
  
  render() {
    return (
      <div ref={ box => this.litterBox = box }>
        litter
      </div>
    )
  }
  
  componentDidMount() {
    // Use this.litterBox to refer to the DOM node. It will be type checked for you, too!
    console.log(this.litterBox.textContent)
  }
}

Glossary

Interface

A collection of types that describes the shape that a value must have

interface CatValue {
  name: string
  age: number
}

function petCat(cat: VatValue) {
  console.log(cat.name)
}

let myCat = { name: 'Whiskers', age: 4 }
petCat(myCat) // 'Whiskers'

PROTIP: use ? for optional values

interface CatValue {
  name: string
  age: number
  favoriteFish?: string // optional
}

guncha/react-typescript.md