react with typescript

Why use typescript with react? If you like strongly typed languages you will welcome using typescript in your react projects. This simple project will show you how to create a simple react app with a typescript template already installed.

To create a react project with typescript it is pretty simple to do. All you need to do is navigate to your dev folder in vs code and enter the following. It will create the ‘react-typescript-example’ for you. Boy that was easy!

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

It might ask you to install “create-react-app” if you don’t already have it installed. Go ahead and choose “yes”. Now start your project with the following commands.

  cd react-typescript-example
  npm start

If you did everything correctly you should have something that looks like below. Congratulations you just created your first typescript based react project.

Let’s do some typescript code

You will notice in your project several files were setup to get you started. Instead of .js files you have .tsx files. Also some test files were set up. Pretty awesome stuff!

Let play around with the app.tsx file to do some basic type script. Change your App.tsx file to the following.

import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
      </header>
    </div>
  );
}

export default App;

Then declare your variables as follows.

let <variableName>: <type> = <value>;

A simple string and boolean might look like.

let myString: string = "Is typescript being used? ";
let isTypeScriptBeingUsed: boolean = true;

Also if you make a mistake the project will not compile. That’s where the power of typescript comes in. Forcing type strictness in the code is a desirable thing. Check it out by removing the type declaration ‘string’ save and see what happens. You will get the following compile error.

Using these variables we can concat the string and boolean. Modify your current code as shown and insert the new variable ‘sentence’ into our react component using JSX notation. Simple stuff keeping your code well typed.

import './App.css';

let myString: string = "Is typescript being used? ";
let isTypeScriptBeingUsed: boolean = true;
let sentence: string = myString + isTypeScriptBeingUsed;

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>
          {sentence}
        </p>
      </header>
    </div>
  );
}

export default App;

Other types

There are many different types in typescript, below is example of a few of the common ones.

// Boolean
let isDone: boolean = false;

// Number
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
let big: bigint = 100n;

// String
let color: string = "blue";

// Array
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];

// Enum
enum Color {
  Red,
  Green,
  Blue,
}
let c: Color = Color.Green;

There is so much more. You are one step closer to doing better react code. Have fun!

Clone our repo

If you just want to use the repo for this post clone it here. https://github.com/JimmySoftLLC/react-typescript-example

Then do the following in VSCode

npm install
npm start

Adding typescript to an existing project

To add TypeScript to an existing Create React App project, first install it using:

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

Next, rename any file to be a TypeScript file (e.g. src/index.js to src/index.tsx) and restart your development server.

Type errors will show up in the same console as the build one. You’ll have to fix these type errors before you continue development or build your project. For advanced configuration, see here.

Note: There will be a lot of typing errors in your conversion. The first step I do is to set them to the :any type so that your project can compile. Then one by one start setting the types and interfaces your desire. This will be a lot of work but it is worth it.