Getting Started with React and TypeScript

This tutorial is ripped straight from my colleague's (Grant Bartlett) blog. I have just refactored and tweaked it for my own needs. Feel free to read the original. A

The Source Code is also available on his Github account.

Setting Up

#!/bin/bash

# Create a folder for our project
mkdir your-folder-name \
  && cd your-folder-name \
  && npm init --yes

# Install react and react-DOM as dependencies of the project
npm install react && npm install react-dom

#  Under our devDependencies we need TypeScript...
npm install typescript --save-dev

# ... and the typings for react and React-DOM
npm install @types/react --save-dev \
  && npm install @types/react-dom --save-dev

# Initialize our typescript project
tsc --init

Open the tsconfig.json file and add an array for include after compilerOptions, which will tell Typescript where to look for our code.

{
    "compilerOptions": {
    },
    "include":[ 
        "./src/**/*"
    ]
}

Now create a src folder, and inside create an App.ts file. https

export class App
{
    constructor()
    {
        console.log("Hello app!");
    }
}

Test TypeScript is compiling by running tsc in the terminal. If successful, you should see an App.js file output to the src folder. Once it does, go ahead and delete the .js file once it appears.

Getting Typescript and React Working Together

Now we have TypeScript compiling we can look at getting it to work with React files too.

In our tsconfig.json file, update yours to match below.

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "jsx": "react",
        "sourceMap": true,
        "outDir": "./dist/",
        "removeComments": true,
        "noImplicitAny": true,
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "preserveConstEnums": true
    },
    "include": [
        "./src/**/*"
    ]
}

To test TypeScript will now pick up React files, we’ll add a new file to our src folder called Main.tsx.

import * as React from 'react';
import { App } from './App';

export interface IMainProps
{
    app: App;
}

export class Main extends React.Component<IMainProps, {}>
{
    public render(): JSX.Element
    {
        return (
            <>
                <h1>Hello main</h1>
            </>
        );
    }
}

Run tsc in your terminal, and you should now see a dist folder appear with a Main.js file, which means TypeScript is now also picking up React TypeScript files! (.tsx).

Adding Webpack

Now you will probably want to read about adding Webpack in order to have it serve up your content whilst you dev.