In this article, you will learn how to use TypeScript with React.
So by the end of this article, you will have a solid understanding of how to write React code with TypeScript.
Want to watch the video version of this tutorial? You can check out the video below:
Prerequisites
To follow along with this tutorial, there are some prerequisites. You should:
Have basic knowledge of working with React
Basic understanding of writing TypeScript code
Getting Started
To get started with TypeScript, you first need to install TypeScript on your machine which you can do by executing npm install -g typescript from the terminal or command prompt.
Now, we will create a Vite project using TypeScript.
npm create vite
Once executed, you will be asked some questions.
For the project name, enter react-typescript-demo.
For framework, select React and for variant select TypeScript.
Once the project is created, open the project in VS Code and execute the following commands from the terminal:
cd react-typescript-demo
npm install
Now, let's do some code cleanup.
Remove the src/App.css file and replace the content of src/App.tsx file with the following content:
const App = () => {
return <div>App</div>;
};
export default App;
After saving the file, you might see the red underlines in the file as shown below:
If you get that error, just press Cmd + Shift + P(Mac) or Ctrl + Shift + P(Windows/Linux)to open the VS Code command palette and enter TypeScript text in the search box and select the option TypeScript: Select TypeScript Version...
Once selected, you will see options to select between the VS Code version and the workspace version as shown below:
From these options, you need to select Use Workspace Version option and once you select that option, the error from the App.tsx file will be gone.
Now, open src/index.css file and replace its contents with the following content:
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
Now, let's start the application, by executing npm run dev command.
Now, click on the displayed URL and access the application, you will see the following initial screen with text App displayed in the browser.
React and TypeScript Basics
When using React with TypeScript, the first thing you should know is the file extension.
Every React + TypeScript file needs to have a .tsx extension.
If the file does not contain any JSX-specific code, then you can use the .ts extension instead of the .tsx extension.
To create a component in React with TypeScript, you can use the FC type from the react package and use it after the component name.
So open src/App.tsx file and replace it with the following contents:
import { FC } from 'react';
const App: FC = () => {
return <div>App</div>;
};
export default App;
Now, let's pass some props to this App component.
Open src/main.tsx and pass a title prop to the App component as shown below:
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App title='TypeScript Demo' />
</React.StrictMode>
);
However, with the added title prop, we now have a TypeScript error as you can see below:
Three Ways of Defining Prop Types
We can fix the above TypeScript error in three different ways.
- Declaring Types Using Interface
The error is coming because we have added a title prop as a mandatory prop for the App component so we need to mention this inside the App component.
So open src/App.tsx file and replace its contents with the following content:
import { FC } from 'react';
interface AppProps {
title: string;
}
const App: FC<AppProps> = () => {
return <div>App</div>;
};
export default App;
As you can see above, we have added an extra interface AppProps to specify which props the component is accepting and we used the AppProps interface after the FC in angle brackets.
It's a good practice and recommended to start the interface name with a capital letter like
AppPropsin our case.
Now, with this change, the TypeScript error will be gone as you can see below:
This is how we specify what props a particular component accepts.
- Declaring Types Using type
We can also declare the props type using type keyword.
So open App.tsx file and change the below code:
import { FC } from 'react';
interface AppProps {
title: string;
}
const App: FC<AppProps> = () => {
return <div>App</div>;
};
export default App;
to this code:
import { FC } from 'react';
type AppProps = {
title: string;
};
const App: FC<AppProps> = () => {
return <div>App</div>;
};
export default App;
Here, instead of interface declaration we used type declaration and the code will work without any TypeScript error.
It's up to you, which way to use, I always like to use an interface for declaring component types.
- Using inline type declaration
The third way of declaring type is by defining inline types as shown below:
const App = ({ title }: { title: string }) => {
return <div>App</div>;
};
export default App;
As you can see above, we have removed the use of FC as it's not needed, and while destructuring the title prop we defined the type of it.
So out of these three ways, you can use whichever way you want. I always prefer to use an interface with FC so if later I want to add more props, the code will not look complicated which will happen if you define inline types.
Now, let's use the title prop and display it on the UI.
Now, replace the contents of the App.tsx file with the following content:
import { FC } from 'react';
interface AppProps {
title: string;
}
const App: FC<AppProps> = ({ title }) => {
return <h1>{title}</h1>;
};
export default App;
As you can see, we're using an interface with FC and we're destructuring the title prop and displaying it on the screen.
Now, open src/index.css file and add the following CSS inside it:
h1 {
text-align: center;
}
If you check the application in the browser, you will see that the title with text TypeScript Demo is correctly getting displayed.
How to Create a Random Users List Application
Now, that you have a basic idea of how to declare component props, let's create a simple Random Users List Application that will display a list of 10 random users on the screen.
For that, we will be using Random User Generator API.
And the API URL we will be using is this:
https://randomuser.me/api/?results=10
So let's first install the axios npm library, so we can make an API call using it.
Execute the following command to install the axios library:
npm install axios
Once installed, restart the application by executing npm run dev command.
Now, replace the contents of App.tsx file with the following content:
import axios from 'axios';
import { FC, useEffect } from 'react';
interface AppProps {
title: string;
}
const App: FC<AppProps> = ({ title }) => {
useEffect(() => {
const getUsers = async () => {
try {
const { data } = await axios.get(
'https://randomuser.me/api/?results=10'
);
console.log(data);
} catch (error) {
console.log(error);
}
};
getUsers();
}, []);
return <h1>{title}</h1>;
};
export default App;
As you can see above, we have added an useEffect hook where we're making API call to get the the list of users.
Now, If you open the console in the browser, you will be able to see the API response displayed in the console.
As you can see, we're correctly getting a list of 10 random users and the actual users list is coming in the results property of the response.
How to Store the Users List in State
Now, let's store those users in the state so we can display them on the screen.
So inside the App component, declare a new state with an initial value of an empty array like this:
const [users, setUsers ] = useState([]);
And call the setUsers function to store the users in the useEffect hook after the API call.
So your App component will look like this now:
import axios from 'axios';
import { FC, useEffect, useState } from 'react';
interface AppProps {
title: string;
}
const App: FC<AppProps> = ({ title }) => {
const [users, setUsers] = useState([]);
useEffect(() => {
const getUsers = async () => {
try {
const { data } = await axios.get(
'https://randomuser.me/api/?results=10'
);
console.log(data);
setUsers(data.results);
} catch (error) {
console.log(error);
}
};
getUsers();
}, []);
return <h1>{title}</h1>;
};
export default App;
As you can see here, we're calling setUsers function with the value of data.results.
How to Display the Users on the UI
Now, let's display the name and email of the individual user on the screen.
If you check the console output, you can see that there is a name property for each object that contains the first and last name of the user. So we can combine them to display the complete name.
Also, we have a direct email property for each user object which we can use to display email.
So replace the contents of App.tsx file with the following content:
import axios from 'axios';
import { FC, useEffect, useState } from 'react';
interface AppProps {
title: string;
}
const App: FC<AppProps> = ({ title }) => {
const [users, setUsers] = useState([]);
useEffect(() => {
const getUsers = async () => {
try {
const { data } = await axios.get(
'https://randomuser.me/api/?results=10'
);
console.log(data);
setUsers(data.results);
} catch (error) {
console.log(error);
}
};
getUsers();
}, []);
return (
<div>
<h1>{title}</h1>
<ul>
{users.map(({ login, name, email }) => {
return (
<li key={login.uuid}>
<div>
Name: {name.first} {name.last}
</div>
<div>Email: {email}</div>
<hr />
</li>
);
})}
</ul>
</div>
);
};
export default App;
As you can see, we're using the array map method to loop over the users array, and we're using object destructuring to destructure the login, name and email properties of individual user object, and as an un-ordered list we're displaying the name and email of the user.
However, you will see some TypeScript errors in the file as can be seen below:
This is because, as you can see above, by default TypeScript assumes the type of users array to be never[], so it's not able to find out which properties the users array contains.
So we specifically need to specify all of the properties that we're using along with their types.
Therefore, declare a new interface after the AppProps interface like this:
interface Users {
name: {
first: string;
last: string;
};
login: {
uuid: string;
};
email: string;
}
Here, we're specifying that, each individual user will be an object with name, login and email properties, and we're also specifying the data type of each property.
As you can see, each user object coming from the API has a lot of other properties like phone, location and others. But we only need to specify those properties that we're using in the code.
Now, change the useState users array declaration from this:
const [users, setUsers] = useState([]);
to this:
const [users, setUsers] = useState<Users[]>([]);
Here, we're specifying that users is an array of objects of type Users which is the interface we declared.
Now, If you check the App.tsx file, you will see that there are no TypeScript errors.
And you will be able to see the list of 10 random users displayed on the screen:
As you have seen previously, we have declared Users interface like this:
interface Users {
name: {
first: string;
last: string;
};
login: {
uuid: string;
};
email: string;
}
However, when you have nested properties, you will see it written like this:
interface Name {
first: string;
last: string;
}
interface Login {
uuid: string;
}
interface Users {
name: Name;
login: Login;
email: string;
}
The advantage of declaring separate interfaces for each nested property is that, If you want to use the same structure in any other file, you can just export any of the above interfaces and re-use in other files, Instead of re-declaring the same interface again.
So let's export all of the above interfaces as a named export. So the code will look like this:
export interface Name {
first: string;
last: string;
}
export interface Login {
uuid: string;
}
export interface Users {
name: Name;
login: Login;
email: string;
}
As I said previously, you can also use type declaration here instead of using the interface, so it will look like this:
type Name = {
first: string;
last: string;
};
type Login = {
uuid: string;
};
type Users = {
name: Name;
login: Login;
email: string;
};
How to Create a Separate User Component
When we're using an array map method, to display something on the screen, it's common to separate out that display part in a different component so it's easy to test and it will also make your component code shorter.
So create a components folder inside src folder and create User.tsx file inside it and add the following contents inside it:
const User = ({ login, name, email }) => {
return (
<li key={login.uuid}>
<div>
Name: {name.first} {name.last}
</div>
<div>Email: {email}</div>
<hr />
</li>
);
};
export default User;
If you save the file, you will see the TypeScript errors again.
So we again need to specify which props the User component will be receiving, and we also need to specify the data type of each of them.
So the updated User.tsx file will look like this:
import { FC } from 'react';
import { Login, Name } from '../App';
interface UserProps {
login: Login;
name: Name;
email: string;
}
const User: FC<UserProps> = ({ login, name, email }) => {
return (
<li key={login.uuid}>
<div>
Name: {name.first} {name.last}
</div>
<div>Email: {email}</div>
<hr />
</li>
);
};
export default User;
As you can see above, we have declared a UserProps interface above and we have specified it for the User component using FC.
Also, note that we're not declaring the data type of name and login properties, instead we're using the exported types from App.tsx file:
import { Login, Name } from '../App';
That's why it's good to declare separate types for each nested property, so we can reuse it elsewhere.
Now, we can use this User component inside the App.tsx file.
So change the below code:
{users.map(({ login, name, email }) => {
return (
<li key={login.uuid}>
<div>
Name: {name.first} {name.last}
</div>
<div>Email: {email}</div>
<hr />
</li>
);
})}
to this code:
{users.map(({ login, name, email }) => {
return <User key={login.uuid} name={name} email={email} />;
})}
As you might know when using the array map method, we need to provide the key for the parent element which is User in our case so we have added key prop while using the User component as shown above.
So that means we don't need key inside the User component, so we can remove the key and login prop from the User component.
So the updated User component will look like this:
import { FC } from 'react';
import { Name } from '../App';
interface UserProps {
name: Name;
email: string;
}
const User: FC<UserProps> = ({ name, email }) => {
return (
<li>
<div>
Name: {name.first} {name.last}
</div>
<div>Email: {email}</div>
<hr />
</li>
);
};
export default User;
As you can see we have removed the login prop from the interface and also while destructuring it and the application is still working as before without any issues as you can see below.
How to Create a Separate File for Type Declarations
As you can see, the App.tsx file has become quite large because of the interface declarations, so it's common to have a separate file just for declaring types.
So create a App.types.ts file inside the src folder and move all the type declarations from App component to App.types.ts file:
export interface AppProps {
title: string;
}
export interface Name {
first: string;
last: string;
}
export interface Login {
uuid: string;
}
export interface Users {
name: Name;
login: Login;
email: string;
}
Note that, we're also exporting the AppProps component in the above code.
Now, update the App.tsx file to use these types as shown below:
import axios from 'axios';
import { FC, useEffect, useState } from 'react';
import { AppProps, Users } from './App.types';
import User from './components/User';
const App: FC<AppProps> = ({ title }) => {
const [users, setUsers] = useState<Users[]>([]);
// ...
};
export default App;
As you can see above, we're importing the AppProps and Users from App.types file:
import { AppProps, Users } from './App.types';
And your User.tsx file will look like this now:
import { FC } from 'react';
import { Name } from '../App.types';
interface UserProps {
name: Name;
email: string;
}
const User: FC<UserProps> = ({ name, email }) => {
return (
<li>
<div>
Name: {name.first} {name.last}
</div>
<div>Email: {email}</div>
<hr />
</li>
);
};
export default User;
As you can see above, we're importing the Name from App.types file.
import { Name } from '../App.types';
How to Display a Loading Indicator
Whenever you're making an API call to display something, it's always good to display some loading indicator, while the API call is going on.
So let's add a new isLoading state inside the App component:
const [isLoading, setIsLoading] = useState(false);
As you can see, we have not mentioned any data type while declaring a state like this:
const [isLoading, setIsLoading] = useState<boolean>(false);
This is because when we assign any initial value, false in our case, TypeScript automatically infers the type of data we will be storing which is boolean in our case.
When we declared users state, it was not clear what we would be storing by just the initial value of an empty array [] so we needed to mention its type like this:
const [users, setUsers] = useState<Users[]>([]);
Now, change the useEffect code to the below code:
useEffect(() => {
const getUsers = async () => {
try {
setIsLoading(true);
const { data } = await axios.get(
'https://randomuser.me/api/?results=10'
);
console.log(data);
setUsers(data.results);
} catch (error) {
console.log(error);
} finally {
setIsLoading(false);
}
};
getUsers();
}, []);
Here, we're calling setIsLoading with value of true before the API call, and inside the finally block, we're setting it back to false.
The code written inside the finally block will always execute even if there is success or failure. So even if the API call succeeds or fails, we need to hide the loading message so we're using finally block to achieve that.
Now, we can use the isLoading state value to display a loading message on the screen.
After the h1 tag and before the ul tag, add the following code:
{isLoading && <p>Loading...</p>}
Now, If you check the application, you will be able to see the loading message while the list of users is getting loaded.
So this is a better user experience.
However, If you keep a closer look at the displayed users, you will see that the users are getting changed once loaded.
So initially we see a set of 10 random users and immediately we see a different set of random users without reloading the page.
This is because we're using React version 18(which you can verify from package.json file) and React.StrictMode inside the src/main.tsx file.
And with version 18 of React, when we use React.StrictMode, every useEffect hook executes twice even with no dependency specified.
This only happens in the development environment and not in the production when you deploy the application.
Because of this, the API call is made twice and as the random users API returns a new set of random users every time the API is called, we're setting a different set of users to the users array using setUsers call inside the useEffect hook.
This is the reason we see users getting changed without refreshing the page.
If you don't want this behaviour during development, you can remove the React.StrictMode from the main.tsx file.
So change the below code:
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App title='TypeScript Demo' />
</React.StrictMode>
);
to this code:
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';
ReactDOM.createRoot(document.getElementById('root')!).render(
<App title='TypeScript Demo' />
);
Now, If you check the application, you will see that the list of users is not getting changed, once loaded.
How to Load Users on Button Click
Now, instead of making the API call on page load, let's add a show users button and we will make the API call when we click on that button.
So after h1 tag add a new button as shown below:
<button onClick={handleClick}>Show Users</button>
Now, add handleClick method inside the App component and move all the code from getUsers function to the handleClick method:
const handleClick = async () => {
try {
setIsLoading(true);
const { data } = await axios.get('https://randomuser.me/api/?results=10');
console.log(data);
setUsers(data.results);
} catch (error) {
console.log(error);
} finally {
setIsLoading(false);
}
};
Now, you can remove or comment out the useEffect hook as it's no longer needed.
Your updated App.tsx file will look like this now:
import axios from 'axios';
import { FC, useState } from 'react';
import { AppProps, Users } from './App.types';
import User from './components/User';
const App: FC<AppProps> = ({ title }) => {
const [users, setUsers] = useState<Users[]>([]);
const [isLoading, setIsLoading] = useState<boolean>(false);
// useEffect(() => {
// const getUsers = async () => {
// try {
// setIsLoading(true);
// const { data } = await axios.get(
// 'https://randomuser.me/api/?results=10'
// );
// console.log(data);
// setUsers(data.results);
// } catch (error) {
// console.log(error);
// } finally {
// setIsLoading(false);
// }
// };
// getUsers();
// }, []);
const handleClick = async () => {
try {
setIsLoading(true);
const { data } = await axios.get('https://randomuser.me/api/?results=10');
console.log(data);
setUsers(data.results);
} catch (error) {
console.log(error);
} finally {
setIsLoading(false);
}
};
return (
<div>
<h1>{title}</h1>
<button onClick={handleClick}>Show Users </button>
{isLoading && <p>Loading...</p>}
<ul>
{users.map(({ login, name, email }) => {
return <User key={login.uuid} name={name} email={email} />;
})}
</ul>
</div>
);
};
export default App;
Now, If you check the application, you will see that users are loaded only when clicking on the show users button and we also see the loading message.
How to Handle the Change Event
Now, let's add an input field and when we type anything in that input field, we will display the entered text below that input field.
Add an input field after the button like this:
<input type='text' onChange={handleChange} />
And declare a new state to store the entered value like this:
const [username, setUsername] = useState('');
Now, add a handleChange method inside the App component like this:
const handleChange = (event) => {
setUsername(event.target.value);
};
However, you will see that, we're getting a TypeScript error for the event parameter.
With TypeScript we always need to specify the type of each and every function parameter.
Here, TypeScript is not able to identify what's the type of event parameter.
To find out the type of event parameter, we can change the below code:
<input type='text' onChange={handleChange} />
to this code:
<input type='text' onChange={(event) => {}} />
Here, we're using an inline function because when using inline function, the correct type is automatically passed to the function parameter so we don't need to specify it.
So If you mouse over the event parameter, you will be able to see the exact type of event that we can use in our handleChange function as you can see below:
Now, you can revert the below code:
<input type='text' onChange={(event) => {}} />
to this code:
<input type='text' onChange={handleChange} />
Now, let's display the value of username state variable below the input field:
<input type='text' onChange={handleChange} />
<div>{username}</div>
If you check the application now, you will be able to see the entered text displayed below the input field.
Thanks for Reading
That's it for this tutorial. I hope you learned a lot from it.
Want to watch the video version of this tutorial? You can check out this video.
You can find the complete source code for this application in this repository.
If you want to master JavaScript, ES6+, React, and Node.js with easy-to-understand content, check out my YouTube channel. Don't forget to subscribe.
Want to stay up to date with regular content on JavaScript, React, and Node.js? Follow me on LinkedIn.
Top comments (0)