Sign in
Log inSign up
Working with TypeScript & React

Working with TypeScript & React

Tejas Shah's photo
Tejas Shah
·Oct 14, 2021·

3 min read

In this tutorial, you will learn how to get started with TypeScript in React. I will be covering how to set up a react app in typescript and also using typescript in React Components. React is one of the most popular frontend libraries for building UI Components in JavaScript. Typescript is a typed superset of JavaScript. Typescript introduces a strong type system that allows code refactoring, navigation, type-checking, and more. Typescript compiles to Plain JavaScript, hence we can also build react apps in typescript as well. Using typescript to build react apps improves the app performance by introducing the errors at build time.

Setup Typescript in React App

We can use create-react-app to create a new react app

npx create-react-app your_app_name --template typescript

To add Typescript support to an existing create react app

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

But you need to rename your files to .ts or .tsx, so they become typescript files and restart the server.

Package.json & Files

We also have tsconfig.json which is the configuration file for typescript compiler. Configuration is one of the most important part of development but it's the most painful as well. But the create-react-app package generates a basic tsconfig file which can be edited as per need.

Once the setup is done, it's time for you to use typescript in react components. Let's start using typescript in react.

  • type is preferred over interface when building apps. Whereas interface is used when building libraries because interfaces are extendable.

Basic Props

Screenshot (68).png

  • In this example, I have passed an object as props to the component. Destructuring the props at component is preferred generally.

Children Props

Screenshot (73).png

  • In the above example, I have invoked the Header component by passing in some text. But we get an error, stating Type '{ children: string; }' has no properties in common with type 'IntrinsicAttributes'.
  • Similarly, the Footer component is invoked similar to the Header component but I have used the type children : string for it's props. Hence, the text passed to the footer component is considered as the children property of the footer component.
  • Finally, in the Body component, I pass a h1 tag as children. Hence the type of the children gets changed to ReactNode type. The ReactNode types comes from the @types/react package.
const [exists, setExists] = useState(true)
  • For simple values, Type Inference works. Here typescript compiler understands the value of the exists variable is boolean only, hence it doesn't throw any error.
  • But for complex types, the type of the state variable needs to be declared.
type Person = {
  name: string;
  age: number;
};

const [user, setUser] = useState<Person>({} as Person);

  • In the above example, the type of user variable needs to be passed so that typescript compiler doesn't throw any error. Here as keyword helps in type assertion and we lie the typescript compiler that {} object(empty object) is of type Person.

  • It's better to avoid the use of any so as to reduce the problems & type conflicts.

References: