既存プロジェクトにreact-typescriptの環境構築

yarn version
# yarn version v1.22.17

yarn init -y # フォルダの初期化 package.json, yarn.lockの生成
yarn add webpack webpack-cli --dev # webpackとwebpackCLIのインストール
yarn add @babel/core @babel/preset-env babel-loader --dev # babelとwebpackでのbabelビルドをするloaderをインストール
# typescriptのインストール
yarn add typescript --dev
yarn run tsc --init # tsconfig.jsonが生成される 設定は編集可能
# typescriptのコンパイル設定
yarn add @babel/preset-typescript --dev
# reactのインストール
yarn add react react-dom
yarn add @types/react @types/react-dom --dev
# JSXのコンパイル設定
yarn add @babel/preset-react --dev
# webpack-dev-serverのインストール
yarn add webpack-dev-server --dev
# Jestのインストール
yarn add jest @types/jest babel-jest --dev # tsxがテストできるようにbabel-jestもインストール
yarn run jest --init #jest.config.jsの生成 package.jsonにコマンド追加とかも選べる 
# jsdomをtest環境に選択するとnode.js内でもブラウザ環境でテストできる
# Enzymeのインストール (reactのテスト補助ユーティリティ)
yarn add --dev enzyme @types/enzyme enzyme-adapter-react-16 @types/enzyme-adapter-react-16
# styled-componentsの導入 コンポーネントとスタイルをセットで扱うライブラリ
yarn add styled-components
yarn add @types/styled-components babel-plugin-styled-components --dev

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react',
    '@babel/preset-typescript'
  ],
  plugins: [
    '@babel/plugin-transform-runtime',
    'babel-plugin-styled-components'
  ]
}

const path = require('path');

module.exports = {
  mode: process.env.NODE_ENV || 'development', // 環境変数がなければ'development'で見やすいコード, 'production'では1行で出力
  entry: './src/app.tsx', // 読み込みエントリファイル
  output: {
    filename: 'main.js', // 出力ファイル
    path: path.resolve(__dirname, 'dist'), // 自フォルダ
  },
  resolve: {
    extensions: ['.js', '.ts', 'tsx']
  },
  module: {
    rules: [
      {
        // jsx/tsxを対象
        test: /\.(j|t)sx?$/, // テストコード
        exclude: /node_modules/, // 除外
        use: {
          loader: 'babel-loader', // babel使用でビルド
        }
      }
    ]
  },
  devServer: { // webpack-dev-serverでライブリロード
    static: {
      directory: __dirname,
    },
    port: 5000
  },
};

{
  // ・・・
  "scripts": {
    "build": "webpack", // ビルドコマンド
    "lint:ts": "tsc --noEmit", // ts コンパイルエラー検知コマンド
    "test": "jest", // jestテストコマンド
    "serve": "webpack-dev-server" // ライブリロードできるサーバ起動コマンド
  }
}

yarn run build

yarn add jquery # jqueryのインストール,コンパイラで使えるようにする
yarn add @types/jquery --dev # jqueryで使う型定義をインストール: Definitely Typedというリポジトリがある

import { configure } from 'enzyme'
import EnzymeAdapter from 'enzyme-adapter-react-16'
configure({ adapter: new EnzymeAdapter() })

module.exports = {
  // ・・・
  setupFilesAfterEnv: ['<rootDir>/src/setupEnzyme.ts'],

  transform: {
    "^.+\\.tsx?$": "babel-jest"
  }
}