How To Create React App with TypeScript

Learn how to create a new React app with TypeScript support preinstalled

How to create react app with TypeScript

To create a new React app with TypeScript support, firstfollow these simplesteps:

• Download (here) and Install NodeJS on your system (this will give us node, npm and npx commands.)
• Create a new folder, and go there in your Terminal, Bash or cmd.exe
• Type npx create-react-app myProject --template typescript:

npx create-react-app myProject --template typescript

Just wait for npx to build your blank React TypeScript App.

Adding TypeScript Dependencies:

Next, you will need to run one of the following commands, depending on whether you have npm or yarn installed. (Both do same thing)

npm:

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

Use --save-dev instead of --save if need to.

Or same thing using yarn:

yarn:

yarn add typescript @types/node @types/react @types/react-dom @types/jest

I made this video showinghowtobuilding a React app with Typescript:

How to create a React App with TypeScript

So now that you installed TypeScript in your React App, how does TypeScript work?

How To Create Types In TypeScript

Define a type, let's say, Trick (as in magic trick):

type Trick = {
  name: string,
  power: number,
}

In TypeScript this is just a definition of a new unique type.

Note that there are no actual values defined, just their names and types.

A magic trick type Trick has a name (string) and power level (number).

Maybe spell casting could be used for a Role-Playing game you're developing, and you need to know how much damage a magic trick causes to your enemies?

It can be anything you want based on the problem you're trying to solve, just use your creativity.

One quick tip for creating types in TypeScript

The key is to define a composition of different types making up this object.

Don't overdesign types by trying to define as many things as possible. Think about the absolute minimum number of properties and their types the object you're trying to define should have.

A car could have wheels (number), color (string) and number of doors (number), for example.

Keep things as simple as possible.

What is the purpose of using TypeScript?

Creating types in TypeScript can make your code safer.

It prevents you from assigning a value that doesn't match the type defined by the custom pattern you create by using the type keyword (as we've seen earlier with magic trick!).

But what is code safety?

Code safety is a way to limit type-based mistakes in your code to a minimum.

Think of TypeScript as a safeguard.

If assigned values don't agree with the types of an object they should take on a form of, TypeScript will give you a compilation error:

let magictrick:Trick = 100;

In this example, TypeScript gave us an error.

We can't assign just about any value to a variable of type Trick.

Here we assigned the value 100 which is a number to magictrick which is of type Trick.

In this case value must be an object with exactly two properties: name and power.

And both of them must have a value matching the type defined in Trick type. If this type safety test fails, your program will produce an exception error and stop running.

And that's a good thing. If we fix this error, you ensure that your code will not run into potential errors later on, caused by assigning objects to variables of a type they were never intended to have.

To prevent TypeScript errors from happening, make sure to assign values defined with :Trick type to an actual object representing that type:

let magictrick:Trick = {
  name: "tidalwave",
  power: 75,
};

Now this variable assignment will compile without errors.

How To Add TypeScript To An Existing React App

Here's a video explaining how to add TypeScript to an existing React app (that was created using create-react-app):

How to add TypeScript to existing React app

How to add TypeScript to an Existing React App

#react #typescript #create #terminal #cmd #command line #vscode