TypeScript Onboarding for React Engineers

We can get started with TypeScript right away as React engineers. As long as we know how to type props to our components and write handlers for our events, we can build most of our UI in TypeScript.

Create app with TypeScript

npx create-react-app todo --template typescript

Code

import React, { useState } from 'react';

const TodoApp = () => {
  // <Array<string>> specifies state will be Array<string>
  // Generics: https://www.typescriptlang.org/docs/handbook/generics.html
  const [todos, setTodos] = useState<Array<string>>([]);
  const [newTodo, setNewTodo] = useState('');

  const onAdd = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setTodos([...todos, newTodo]);
    setNewTodo('');
  };

  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setNewTodo(event.target.value);
  };

  const onRemove = (todo: string) => {
    setTodos(todos.filter((t) => t !== todo));
  };

  return (
    <>
      {todos.map((todo) => (
        <TodoItem todo={todo} onRemove={onRemove} />
      ))}
      <form onSubmit={onAdd}>
        <input type="text" onChange={onChange} value={newTodo} />
      </form>
    </>
  );
}

// Specify prop types with interface
interface TodoItemProps {
  // We can specify values
  // Basic types: https://www.typescriptlang.org/docs/handbook/basic-types.html
  todo: string;
  // as well as functions
  onRemove(todo: string): void;
  // and other interfaces/types if we wanted too
}

// We are typing function argument `props`
// Object destructuring
const TodoItem = ({ todo, onRemove }: TodoItemProps) => {
  return (
    <div onClick={() => onRemove(todo)} role="button">{todo}</div>
  );
};

export default TodoApp

Interfaces

Interfaces are used to describe a structure of an object.

interface TodoItemProps {
  todo: string;
  onRemove(todo: string): void;
}

Once an interface is defined, we can use it with a component:

const TodoItem = ({ todo, onRemove }: TodoItemProps) => {
  return (
    <div onClick={() => onRemove(todo)} role="button">{todo}</div>
  );
};

Learn more about interfaces:
https://www.typescriptlang.org/docs/handbook/interfaces.html

Event Handlers

Event handlers are functions and TypeScript allows us to specify the type of the argument.

For forms we can use React.FormEvent<HTMLFormElement>:

const onAdd = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  setTodos([...todos, newTodo]);
  setNewTodo('');
};

For input change we can use React.ChangeEvent<HTMLInputElement>:

const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  setNewTodo(event.target.value);
};

These types are provided by @types/react. We can see what other types are available here:

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts

Learn more about functions in TypeScript:
https://www.typescriptlang.org/docs/handbook/functions.html