React - Typescript


typescript integration in React


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




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


WebPack - 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"


  • Import react
import * as React from "react";
  • Interface
export interface HelloProps { 
    compiler: string; 
    framework: string; 
  • Jsx component
export const Hello = (props: HelloProps) => <h1>Hello from {props.compiler} and {props.framework}!</h1>;
// '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.
import * as React from "react";
import * as ReactDOM from "react-dom";

import { Hello } from "./components/Hello";

    <Hello compiler="TypeScript" framework="React" />,
  • The HTML page
<!DOCTYPE html>
        <meta charset="UTF-8" />
        <title>Hello React!</title>
        <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>


Share this page:
Follow us:
Task Runner