はじめに

React + TypeScript + Webpackの構成でプロジェクト構築する時の手順になります。

プロジェクトファイルはこちらで公開中💁‍♂️
ブランチ:topic/basic_template

インストール

まずは、必要なものを順次インストール。

$ yarn add react react-dom

Babel 7からTypeScriptのサポートが導入されていますが、このあたりの情報を読む限り、まだ積極的にBabelによるトランスパイルに移行しなくても良いかなと、個人的には思っています。ちなみに仕事の方でもts-loaderを使っています。

$ yarn add -D @types/react @types/react-dom
$ yarn add -D typescript ts-loader
$ yarn add -D webpack webpack-cli webpack-dev-server

設定

TypeScriptのトランスパイルにts-loaderを指定します。

webpack.config.js

module.exports = {
  mode: "development",
  entry: "./src/index.tsx",
  output: {
    filename: "bundle.js"
  },
  devServer: {
    contentBase: "./public",
    compress: true,
    hot: true,
    host: "localhost",
    port: 3000,
    publicPath: "/"
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"]
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [{ loader: "ts-loader" }]
      }
    ]
  }
};

TypeScriptのコンパイラオプションは、こんな感じで。
jsx:reactの指定を忘れずに。

tsconfig.json

{
  "compilerOptions": {
    // 厳格なNullチェックを行う
    "strictNullChecks": true,
    // 未使用のローカル変数を許可しない
    "noUnusedLocals": true,
    // 暗黙的なany型のthis使用を許可しない
    "noImplicitThis": true,
    // strictモードでパースし、出力ファイルに"use strict"を付与
    "alwaysStrict": true,
    // 対応する.mapファイルを生成
    "sourceMap": true,
    // 暗黙的なany型を許可しない
    "noImplicitAny": true,
    // コンパイルに含めるライブラリを列挙
    "lib": ["dom", "es2017"],
    // 生成されるモジュール形式
    "module": "es2015",
    // トランスパイル後の対象ECMAScriptバージョン
    "target": "es5",
    // .tsxファイルのJSXをサポートする際の方式
    "jsx": "react",
    // default export無しでのdefault importを許可
    "allowSyntheticDefaultImports": true
  }
}

コード準備

JSを読み込んで表示するhtmlを用意。

public/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>React Demo</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="bundle.js"></script>
  </body>
</html>

とりあえずdivエレメントを表示。

src/index.tsx

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

const App = () => <div>app</div>;

ReactDOM.render(App(), document.getElementById("app"));

起動

yarn startでアプリが立ち上がる事を確認。

package.json

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.11.0",
    "react-dom": "^16.11.0"
  },
  "devDependencies": {
    "@types/react": "^16.9.11",
    "@types/react-dom": "^16.9.4",
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.2",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  }
}

まとめ

以上、React + TypeScript + Webpackの構成で、プロジェクト開始する際の流れでした。👷🏻‍♂️

参考

・React & Webpack