MENU


TypeScript

Developed by Microsoft and with a syntax somewhat like Flow, TypeScript builds on JavaScript by adding static type definitions. More popular (Alexa's Ranking 11,109) than Flow (Alexa's Ranking 211,554), it supports Express, Vue, Angular, and React.

To create a new project with TypeScript support:

npx create-react-app my-app --template typescript

Below is a sample code snippet that uses TypeScript with React:


RESETRUNFULL
// src/components/StatefulHello.tsximport * as React from "react";export interface Props {
  name: string;
  enthusiasmLevel?: number;}interface State {
  currentEnthusiasm: number;}class Hello extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { currentEnthusiasm: props.enthusiasmLevel || 1 };
  }
  onIncrement = () => this.updateEnthusiasm(this.state.currentEnthusiasm + 1);
  onDecrement = () => this.updateEnthusiasm(this.state.currentEnthusiasm - 1);
  render() {
    const { name } = this.props;
    if (this.state.currentEnthusiasm <= 0) {
      throw new Error('You could be a little more enthusiastic. :D');
    }
    return (
      <div className="hello">
        <div className="greeting">
          Hello {name + getExclamationMarks(this.state.currentEnthusiasm)}
        </div>
        <button onClick={this.onDecrement}>-</button>
        <button onClick={this.onIncrement}>+</button>
      </div>
    );
  }
  updateEnthusiasm(currentEnthusiasm: number) {
    this.setState({ currentEnthusiasm });
  }}export default Hello;function getExclamationMarks(numChars: number) {
  return Array(numChars + 1).join('!');}

For a good cheatsheet on how to use TypeScript with React, refer to:https://github.com/typescript-cheatsheets/react