Tutorial
Using Create React App v2 and TypeScript
While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.
Introduction
Create React App v2 introduced official TypeScript support, allowing JavaScript users to use TypeScript with the React front-end framework. TypeScript is a powerful tool that helps write safer, self-documenting code, allowing developers to catch bugs faster.
For this article, you will go through the steps of creating a React app with TypeScript using Create React App.
Starting a TypeScript Create React App
First, let’s use create-react-app
with the --typescript
flag.
- npx create-react-app my-typescript-app --typescript
Let’s look at what packages the --typescript
flag get us and what changes it makes.
The TypeScript Additions
The --typescript
flag will add the main TypeScript package.
We also get this notice: We detected TypeScript in your project (src/App.test.tsx) and created a tsconfig.json file for you.
The tsconfig.json
file is how we configure TypeScript projects, similar to how package.json
is for JS projects.
The default tsconfig.json
will look something like the following:
{
"compilerOptions": {
"target": "es5",
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve"
},
"include": ["src"]
}
Examining the App.tsx
File
Let’s jump into the main App file that usually is our main React component:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
}
export default App;
As you will notice, this is actually the same as the JavaScript App.js
. We get the same base as our JavaScript projects, but we can sprinkle TypeScript on top.
Next, let’s create a TypeScript component and see what benefits we can gain.
Creating a TypeScript Component
We’ll start by creating a normal functional component in this same App.tsx
file:
function MyMessage({ message }) {
return <div>i shall speak! my message is: {message}</div>;
}
This is a simple component where we pull message
out of props
. Now let’s add some TypeScript to tell this function that its message
parameter should be a string
.
If you’re familiar with TypeScript, you may think you want to add the following to message: message: string
. What we have to do in this situation is define the types for all props
as an object. There’s a few ways we can do this:
Types inline:
function MyMessage({ message }: { message: string }) {
return <div>i shall speak! my message is: {message}</div>;
}
Props object:
function MyMessage(props: { message: string }) {
return <div>i shall speak! my message is: {props.message}</div>;
}
Separate types object:
interface MyMessageProps {
message: string;
}
function MyMessage({ message }: MyMessageProps) {
return <div>i shall speak! my message is: {props.message}</div>;
}
There are many ways to use TypeScript in our projects. You can create an interface
and move that into a separate file so your types can live elsewhere. This may seem like a lot of writing, so let’s see what we gain from writing a bit more.
We’ve told this component that it only accepts a string
as the message
parameter. Now let’s try using this inside our App
component.
Using TypeScript Components
Let’s use this MyMessage
component.
When we go to use this component, we can see VS Code bring up the component’s signature right as we type. We don’t have to jump back to the component (especially if it’s in another file) to see what its inputs should be.
That isn’t the most readable, so let’s jump into using each prop individually.
Seeing Prop Types
As soon as we start typing message
, we can see what that prop should be:
Seeing Type Errors
If we add a number as a message, TypeScript will throw an error and help us catch these typing bugs.
React won’t even compile if there are type errors like this:
Conclusion
This only scratches the surface of what TypeScript provides us. You can create types for all your components and props, and with VS Code you’ll be able to read them. You’ll also catch errors faster since TypeScript won’t even let the project compile with type errors.