TypeScript with React

TypeScript can be used for static type checking in React when TypeScript supports JSX and React has typings from Definitely Typed.

React is a popular library for creating user interfaces. It provides a JavaScript abstraction for creating view components using a JavaScript language extension called JSX. To understand how TypeScript works with React components you may want a primer on generics.

JSX is an XML-like syntax extension to ECMAScript without any defined semantics. It’s NOT intended to be implemented by engines or browsers. It’s NOT a proposal to incorporate JSX into the ECMAScript spec itself. It’s intended to be used by various preprocessors (transpilers) to transform these tokens into standard ECMAScript.

import * as React from 'react'

export interface GenericListProps<T> {
  items: T[];
  itemRenderer: (item: T) => JSX.Element;
}

export class GenericList<T> extends React.Component<GenericListProps<T>, {}> {
  render() {
    const {items, itemRenderer} = this.props

    return <div>{items.map(itemRenderer)}</div>
  }
}

TypeScript ships with three JSX modes: preserve, react, and react-native. These modes only affect the emit stage - type checking is unaffected. You can specify this mode using either the --jsx command line flag or the corresponding option jsx in your tsconfig.json file.

  • preserve: will keep the JSX as part of the output to be further consumed by another transform step like Babel.
  • react: will emit React.createElement, does not need to go through a JSX transformation before use, and the output will have a .js file extension.
  • react-native: is the equivalent of preserve in that it keeps all JSX, but the output will instead have a .js file extension.