セットアップ

npm init -y
npm install --save react react-dom @types/react @types/react-dom
npm install --save-dev webpack webpack-dev-server webpack-cli
npm install --save-dev typescript awesome-typescript-loader source-map-loader
npm install --save-dev html-webpack-plugin

tsconfig.json

生成して

npx tsc --init

編集する

...

   "jsx": "react"

...

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CheckerPlugin } = require("awesome-typescript-loader");

module.exports = {
  entry: "./src/index.tsx",
  output: {
    filename: "bundle.js",
    path: __dirname + "/dist"
  },
  devtool: "source-map",
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".json"]
  },

  module: {
    rules: [
      { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
      { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
    ]
  },
  devServer: {
    contentBase: path.join(__dirname, "public"),
    watchContentBase: true,
    open: true
  },
  optimization: {
    splitChunks: {
      chunks: "all"
    }
  },
  plugins: [
    new CheckerPlugin(),
    new HtmlWebpackPlugin({ template: "src/index.html" })
  ]
};

src/index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";

type Props = {
  greeting: string;
};

const Hello = (props: Props) => {
  return <h1>{props.greeting}</h1>;
};

ReactDOM.render(
  <Hello greeting="Hello World" />,
  document.querySelector("#content")
);

src/index.html

<div id="content"/>

package.json

{
  ... 

  "scripts": {
    "start": "webpack-dev-server --mode development",
    ...
  }

  ...
}

所感

es6 + babel + flowtype の環境よりビルドと型チェックが全体的に高速だったのが好印象でした。最近 flow がよく刺さるので typescript で安定かなぁという気分。