I’ve spent a lot of my time in Angular 2 and loved using Typescirpt with that. So since I made the decision to learn React I found it odd to write ‘vanilla’ Javascript without type definition, interfaces, enums and all the other good stuff that comes with Typescript. I did some research and figured out how to incorporate Typescript into a React project from scratch and thought I’d share my findings in this post for anyone else who wants to do the same.

I have written a post about moving from Gulp to Webpack which if you’ve read will see some things form there in here. If you haven’t read it and want to get a better understanding of how webpack works, I highly recommend you doing so.

Let’s get started

Below is a video version of this article for those who prefer learning that way.

This tutorial assumes you have Node version 8 or above installed on your machine, you have some knowledge of how React works, and know a bit about the terminal.

Create a folder called called react-typescript by typing in your terminal.

$ mkdir react-typescript

Create a folder in react-typescript called src. Then in your terminal type;

$ touch webpack.config.js index.html $ npm init -y

The last command creates a package.json file with the default settings/ You’re welcome to change the file if you need to. This concludes the basic setup of the project, now let’s start editing files.

Open the webpack.config.js file you created and place some simple webpack starter code in it.

I’ve spoken about what each thing does in this article, but a lot of them are self explanatory.

Let’s add a file to entry called index.tsx from the src folder like so ‘./src/index.tsx’. We haven’t yet created this file but we will do it later. The .tsx extension is the Typescript version of .jsx similarly .ts is used instead of .js, but we won’t be using any of those in this tutorial. Also in the output, let’s put everything in a folder called build which will export on the root of the project using path, and collect all the amalgamated js files into a bundle.js.

Not let’s create an index.tsx file in the src folder and add this code.

You may be used to importing react in regular js files like this;

import React from "react";

But for Typescript you have to import all (*) as React. The code snippet you pasted is a pretty simple React file that just puts the word ‘Hello’ in a DOM node with the class ‘container’. Let’s create this node in a file called index.html at the root of the project.

Now we need to install all the npms we’ve referenced. First let’s install the react modules.

$ npm i react react-dom

Then the webpack libraries as dev dependencies.

$ npm i webpack webpack-dev-server@2.9.7 -D

You’ll notice we’ve installed a specific version of webpack-dev-server because there is a breaking bug with version 2.10.0. If you happen to be going through this when there is a newer version beyond the broken one, you’re more than welcome to try that instead.

Okay–we have a typescript file, but webpack doesn’t know how to read it. Let’s give it the ability to do that. Install awesome-typescript-loader as a dev dependency.

$ npm i typescript awesome-typescript-loader -D

You can read here why it’s better than using ts-loader. Edit the webpack.config file accordingly by adding a rule to the module section.

We’re almost there. Create a file in the root called tsconfig.json which, amongst other things, tells webpack where to direct its search for typescript files.

Now we only have a few more dev dependencies to install. By default our React installations don’t have information about what types the methods are in the packages. We can install packages to generate the types for React and React DOM.

The final edit needed is to update the package.json file by replacing test in scripts with this line;

"start": "webpack-dev-server"

Now if you hit npm start (or yarn start if you have Yarn) in the terminal to start the server. Navigate to localhost:8080 and voila, you should see ‘Hello’ in a h1 tag.

And that’s it! You have a basic Typescirpt, webpack ,and React setup. For the average react project, you’ll probably want to have multiple component files, source maps for debugging, styles, and possibly the ability not to have the bundle.js file hard coded in the index. We’ll deal with that in the next part of this tutorial.