Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React + Typescript Cheatsheet

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> {
    constructor(props: TodoProps) {
        super(props)
        this.state = { ... } // initial state
    }
    ... // public + react methods
}

Misc

refs

In order for Typescript to be happy, use refs inside the class like so:

class Cat extends <CatProps, {}> { // no state
  refs: {
    [key: string]: (Element)
    litterBox: (HTMLInputElement) // !important
  }
  constructor(props: CatProps){ ... } // constructor
  render() {
    return (
      <div ref="litterBox">
        litter
      </div>
    )
  }
}

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
}
@westerdaled

This comment has been minimized.

Copy link

westerdaled commented Aug 7, 2017

This has been very useful , I now have a better idea of why there is this mysterious "?" in the interface files . Thanks very much.

@juanparadox

This comment has been minimized.

Copy link

juanparadox commented Oct 31, 2017

This is great! I'd like to see more!

@gilangaramadan

This comment has been minimized.

Copy link

gilangaramadan commented Dec 20, 2017

Wow thank you!

@mhayes

This comment has been minimized.

Copy link

mhayes commented Feb 2, 2018

Thanks, just what I was looking for!

@rdandnayak

This comment has been minimized.

Copy link

rdandnayak commented Feb 7, 2018

Thanks. concise and exact

@mikgr

This comment has been minimized.

Copy link

mikgr commented Feb 24, 2018

Thanks!

@drrudkh

This comment has been minimized.

Copy link

drrudkh commented Apr 17, 2018

Is it good practice to declare state as property of the class ?

class TodoComponent extends React.Component<TodoProps, TodoState> {
  public state = {
    ...
  }

  constructor(props: TodoProps) {
    super(props)
  }
}

I think we can even get rid of the constructor all togheter.

@jasonwr

This comment has been minimized.

Copy link

jasonwr commented Jun 25, 2018

@drrudkh you should never have to declare state as a property. The members state and props are already inherited from React.Component according to the official documentation:

Instance Properties
props
state

Here: https://reactjs.org/docs/react-component.html

State is as the name implies the current state of a component instance in memory. The way I think of it is it's a mutable object that allows developers to put bound properties (variables) to that represent elements in the DOM such as user input etc. Hope that makes sense.

@GitHub1396

This comment has been minimized.

Copy link

GitHub1396 commented Feb 11, 2019

What if we are going to have some component model and let them to be inherited from normal one in real projects?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.