TypeScript

Originally written on 2020-05-28. DEV's displayed publication date reflects this archive migration.

Typescript & React

Create React App

Install create-react-app

$ npm install -g create-react-app
# OR: if you happen to be in China, you can install cnpm
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ cnpm install -g create-react-app

Then you can create a react app with TypeScript:

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

---

Extra: VSCode Extensions

1. Chinese for Chinese environment
2. ES7 React/... snippets for snippets (make your life easier)
3. TypeScript Importer for typescript support

---

Create a FunctionComponent with TS

Just as you normally would with a few minor changes:

const App: React.FC<AppProps> = ({ func })=> {
    return ...
}

Declare what kind of the function is: React.FunctionComponent (React.FC), and its props type: <AppProps>.

Declare the types of PROPS

There are 2 ways to declare this: interface and type, the latter with more specific notes when you hover over it.

interface AppProps {
  func?(): void;
  //a function or no function at all, it returns nothing
}

The second way:

type AppProps = {
  func?(): void;
};

This will provide more notes when you hover over AppProps.

Types or Interfaces

The rule of thumb is:

• use interfacd for public API's definition
• use type for React Component's Props and State

Declare default value of a prop

There are many ways to define a default value of a prop, but the one I like and I think the simplest way is:

// ////////////////
// function components
// ////////////////
type GreetProps = { age: number };

const Greet = ({ age = 21 }: GreetProps) => {
  /*...*/
};

Declare the types of HOOKS

const [searchValue, setSearchValue] = useState<string>();

You either have to specify right after useState statement, or implicitly decalre the type in the brackets like so:

const [searchValue, setSearchValue] = useState("");

Declare the types of React.ChangeElement

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

Now the file knows that you are aiming to get the value of an event happens in an HTML input field.

Full Code

import React, { useState } from "react";

type AppProps = {
  sendSearchQuery?(): void;
};

const App: React.FunctionComponent<AppProps> = ({
  sendSearchQuery = () => undefined,
}) => {
  const [searchValue, setSearchValue] = useState<string>();
  const onSearchInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchValue(e.target.value);
  };
  return (
    <div>
      <p>{searchValue}</p>
      <input onChange={onSearchInput} name="search" type="text" />
    </div>
  );
};

export default App;

Declare the types of useRef

You can declare a reference of any HTML element or null like so:

const ref = useRef<HTMLElement | null>(null);

If you want to be more specific you can always change the type:

const inputRef = useRef<HTMLInputElement>(null);

Then you can use it like so:

// ...
return <input ref={inputRef} type="text" />;

Comment in TS

TSDoc /** comment */ style: You can and are encouraged to leave descriptive comments on reusable components.

References

• React TypeScript Cheatsheets