React - Typescript

> (World Wide) Web - (W3|WWW) > Javascript (Js|ECMAScript) > React

1 - About

typescript integration in React

3 - Installation

Not all packages include declaration files. TypeScript will looks in the @types/react package.

yarn add @types/react @types/react-dom
# or
npm install --save-dev @types/react @types/react-dom
npm install --save-dev typescript ts-loader 
  • Install source-map-loader - source-map-loader uses any sourcemap outputs from TypeScript to inform webpack when generating its own sourcemaps. This will allow you to debug your final output file as if you were debugging your original TypeScript source code. Other loader: awesome-typescript-loaderwith some diff
npm install --save-dev source-map-loader
Advertising

4 - Configuration

4.1 - Typescript

tsconfig.json

tsconfig.json
{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es6",
        "jsx": "react"
    }
}

4.2 - WebPack

WebPack - webpack.config.js

webpack.config.js
module.exports = {
    mode: "production",
 
    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",
 
    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".ts", ".tsx"]
    },
 
    module: {
        rules: [
            {
                test: /\.ts(x?)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "ts-loader"
                    }
                ]
            },
            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            {
                enforce: "pre",
                test: /\.js$/,
                loader: "source-map-loader"
            }
        ]
    },
 
    // When importing a module whose path matches one of the following, just
    // assume a corresponding global variable exists and use that instead.
    // This is important because it allows us to avoid bundling all of our
    // dependencies, which allows browsers to cache those libraries between builds.
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }
};

4.3 - Example

  • Import react
/src/components/Hello.tsx
import * as React from "react";
  • Interface
/src/components/Hello.tsx
export interface HelloProps { 
    compiler: string; 
    framework: string; 
}
  • Jsx component
/src/components/Hello.tsx
export const Hello = (props: HelloProps) => <h1>Hello from {props.compiler} and {props.framework}!</h1>;
/src/components/Hello.tsx
// 'HelloProps' describes the shape of props.
// State is never set so we use the '{}' type.
export class Hello extends React.Component<HelloProps, {}> {
    render() {
        return <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>;
    }
}
  • The main.
/src/index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
 
import { Hello } from "./components/Hello";
 
ReactDOM.render(
    <Hello compiler="TypeScript" framework="React" />,
    document.getElementById("example")
);
  • The HTML page
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello React!</title>
    </head>
    <body>
        <div id="example"></div>
 
        <!-- Dependencies -->
        <script src="./node_modules/react/umd/react.development.js"></script>
        <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
 
        <!-- Main -->
        <script src="./dist/main.js"></script>
    </body>
</html>
Advertising

5 - Documentation