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

#!/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.

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", /* 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": [
        "./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.

微信扫一扫,分享到朋友圈

Getting Started with React and TypeScript

前辈们留下一地教训,闪电上市的瑞幸能否幸免?

上一篇

干货:PHP与大数据开发实践

下一篇

你也可能喜欢

Getting Started with React and TypeScript

长按储存图像,分享给朋友