On Udemy I have been following this course to get a better understanding of TypeScript and how it works with React and Redux. When I started I wasn’t quite sure what it’s going to be, but I was excited about it. I’m not yet done, but wanted to share some of the work that I did so far and what I have learnt.

I’ll assume the reader has a basic understanding of TypeScript, if not, this video is an excellent way to get started with TypeScript.

TypeScript and React

TypeScript and react play well together. To create a new react app that contains typescript we have to add a bit to the usual create-react-app call:

npx create-react-app <appname> --template typescript

The “— template typescript” flag changes some things in the react app. The extension for App.js and index.js change to App.tsx and index.tsx, added a file tsconfig.json. With that we are ready to add types into our React file.

To pass down props between a parent and child I decide to make two components, called Vehicle and Car. The Vehicle is the parent. The files look like this:

Vehicle.tsx
import { Car } from './Car';
const Vehicle = () => {
return <Car color="red" />;
}
export default Vehicle;Car.tsx
interface CarProps {
color: string;
}
export const Car = ({ color }: CarProps) => {
return <div>{color}</div>;
};

TypeScript additions to the Child/Parent component boilerplate are the interface declaration and assignment of that type to Car inside Car.tsx.

There is another way of writing the Car component, it’s with the usage of React.FC. The Car.tsx file would look like this:

export const Car: React.FC<CarProps> = ({ color }) => {
return <div>{color}</div>;
};

It is recommended to not use the React.FC extension anymore, more about it can be found in this merge request for create-react-app.

Next, we will take a look at how to use state with TypeScript.

GuestList.tsx
import { useState } from 'react';
const GuestList = () => {
const [name, setName] = useState('');
const [guests, setGuests] = useState<string[]>([]);
const onClick = () => {
setName('');
setGuests([...guests, name]);
};
return <div>
<h3>Guest List</h3>
<ul>
{guests.map((guest) => (
<li key={guest}>{guest}</li>
))}
</ul>
<input value={name} onChange={(e) => setName(e.target.value)} />
<button onClick={onClick}> Add Guest</button>
</div>;
}
export default GuestList;App.tsx
import React from 'react';
import './App.css';
import GuestList from './components/GuestList';
function App() {
return (
<div >
<GuestList/>
</div>
);
}
export default App;

We are importing GuestList into the App.tsx file, and inside the App function we are displaying the GuestList just like we would in any other React app.

The GuestList.tsx file on first glance looks identical to any other js file on the first glance. There are a few TypeScript features in there.

...
const [guests, setGuests] = useState<string[]>([]);
...

Here, we utilize the React hook useState, which helps us set guests. This is were we notice that we had to provide the useState hook a type of “string[]”, which means we expect the results will strings and we can expect multiple of them(that’s why we have the square brackets.

This is why I said that TypeScript and React play well. It is relatively easy to start a new project with React and explore the options of it. The documentation at TypeScriptLang.com are a good reference.