Getting Started with React and TypeScript


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


# 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": {

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

export class App
        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
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", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
        "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
        "jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
        "sourceMap": true, /* Generates corresponding '.map' file. */
        "outDir": "./dist/", /* Redirect output structure to the directory. */
        "removeComments": true, /* Do not emit comments to output. */
        "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
        "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
        "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
        "preserveConstEnums": true
    "include": [

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.


Getting Started with React and TypeScript






Getting Started with React and TypeScript