How to use TypeScript with Create React App

To start, let's talk a little about what Create React App is. This is a React tool that includes all the JavaScript packages that the developer needs to run a project with this framework created by Facebook, including code transpilation, basic linting, and build systems and tests. In short, the developer can start writing React code with minimal experience, you don't need to configure a build system like Webpack or configure Babel to transpile your code.

At version 2.0, Create React App now supports TypeScript, allowing JavaScript users to write with TypeScript conventions on the frontend side of React.

Use TypeScript in Create React App

To get started, you need Node.js installed, basic knowledge of React and TypeScript, and a modern code editor.

First, open your terminal window and go to the directory where you want to build your project. Then use create-react-app with --template typescript:

npx create-react-app cra-typescript-example --template typescript

The Window will display this message:

Creating a new React app in [..]/cra-typescript-example.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-typescript...

The --template typescript instructs the Create React App script to build, using the cra-template-typescript format. This will add the main Typescript package.

When the installation is complete, you will have a new React app with TypeScript support. Navigate to your project directory and you can open it in your code editor.

What is TypeScript?

On their official website, they note that “TypeScript is a strongly typed programming language that is based on JavaScript, giving you better tools at any scale. TypeScript adds additional syntax to JavaScript to support tighter integration with your editor. Catch errors early on in your editor.”

TypeScript stands in an unusual relationship with JavaScript. TypeScript offers all the features of JavaScript and an additional layer on top of these: the TypeScript type system. For example, JavaScript provides language primitives like string and number but doesn't check that you've assigned them consistently. TypeScript does.

This means that your existing working JavaScript code is also TypeScript code. The main benefit of TypeScript is that it can highlight unexpected behavior in your code, reducing the chance of errors.

We recommend you on video