$ yarn remove flow-bin flow-typed @babel/preset-flow eslint-plugin-flowtype babel-eslint
$ rm -f .flowconfig

 {
   "presets": [
     [
       "@babel/preset-env",
       {
         "useBuiltIns": "usage"
       }
     ],
-    "@babel/preset-flow",
     "@babel/preset-react"
   ],
   "plugins": ["styled-components", "@babel/plugin-syntax-dynamic-import"]
 }

 module.exports = {
   env: {
     browser: true,
     'jest/globals': true,
   },
-  parser: 'babel-eslint',
-  extends: ['airbnb', 'plugin:flowtype/recommended', 'prettier'],
-  plugins: ['flowtype', 'jest'],
+  extends: ['airbnb', 'prettier'],
+  plugins: ['jest'],
 };

$ yarn add -D typescript @types/react @types/react-dom @types/react-redux @types/redux-logger @types/history @types/react-router-dom @types/uuid @types/styled-components awesome-typescript-loader

$ yarn tsc --init

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
    "module": "esnext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
    "lib": ["es2015", "dom"] /* Specify library files to be included in the compilation. */,
    // "allowJs": true,                       /* Allow javascript files to be compiled. */
    // "checkJs": true,                       /* Report errors in .js files. */
    "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
    "sourceMap": true /* Generates corresponding '.map' file. */,
    // "outFile": "./",                       /* Concatenate and emit output to single file. */
    // "outDir": "./",                        /* Redirect output structure to the directory. */
    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    // "composite": true,                     /* Enable project compilation */
    "removeComments": true /* Do not emit comments to output. */,
    // "noEmit": true,                        /* Do not emit outputs. */
    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */

    /* Strict Type-Checking Options */
    "strict": true /* Enable all strict type-checking options. */,
    "noImplicitAny": true /* Raise error on expressions and declarations with an implied 'any' type. */,
    "strictNullChecks": true /* Enable strict null checks. */,
    "strictFunctionTypes": true /* Enable strict checking of function types. */,
    "strictPropertyInitialization": true /* Enable strict checking of property initialization in classes. */,
    "noImplicitThis": true /* Raise error on 'this' expressions with an implied 'any' type. */,
    "alwaysStrict": true /* Parse in strict mode and emit "use strict" for each source file. */,

    /* Additional Checks */
    "noUnusedLocals": true /* Report errors on unused locals. */,
    "noUnusedParameters": true /* Report errors on unused parameters. */,
    "noImplicitReturns": true /* Report error when not all code paths in function return a value. */,
    "noFallthroughCasesInSwitch": true /* Report errors for fallthrough cases in switch statement. */,

    /* Module Resolution Options */
    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
    // "typeRoots": [],                       /* List of folders to include type definitions from. */
    "types": [] /* Type declaration files to be included in compilation. */,
    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */

    /* Source Map Options */
    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */

    /* Experimental Options */
    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
  },
  "files": ["src/index.tsx"],
  "awesomeTypescriptLoaderOptions": {
    "useCache": true,
    "reportFiles": ["src/**/*.{ts,tsx}"],
    "forceIsolatedModules": true
  }
}

 const path = require('path');
+const { CheckerPlugin } = require('awesome-typescript-loader');
 const packageJson = require('./package.json');

 module.exports = {
   entry: [`./${packageJson.main}`],
   output: {
     path: path.resolve(__dirname, 'dist'),
     filename: 'bundle.js',
   },
   module: {
     rules: [
       {
         test: /\.(js|jsx)$/,
         include: [path.resolve(__dirname, 'src')],
         enforce: 'pre',
         loader: 'eslint-loader',
         options: {
           configFile: './.eslintrc.js',
           failOnError: true,
         },
       },
       {
         test: /\.(js|jsx)$/,
         include: [path.resolve(__dirname, 'src')],
         enforce: 'pre',
         loader: 'stylelint-custom-processor-loader',
       },
       {
         test: /\.(js|jsx)$/,
         include: [path.resolve(__dirname, 'src')],
         loader: 'babel-loader',
       },
+      {
+        test: /\.(ts|tsx)$/,
+        include: [path.resolve(__dirname, 'src')],
+        loader: 'awesome-typescript-loader',
+      },
       {
         test: /\.(png|woff|woff2|eot|ttf|svg)$/,
         include: [path.resolve(__dirname, 'node_modules')],
         loader: 'file-loader',
       },
     ],
   },
   resolve: {
-    extensions: ['*', '.js', '.jsx'],
+    extensions: ['*', '.ts', '.tsx', '.js', '.jsx'],
     modules: ['node_modules'],
   },
+  plugins: [
+    new CheckerPlugin(),
+  ],
 };

$ yarn add -D hard-source-webpack-plugin

 const path = require('path');
 const webpackMerge = require('webpack-merge');
+const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
 const webpackCommon = require('./webpack.common.js');

 module.exports = webpackMerge(webpackCommon, {
   mode: 'development',
   devServer: {
     contentBase: path.join(__dirname, 'public'),
     compress: true,
     hot: true,
     port: 3000,
     publicPath: 'http://localhost:3000/',
     historyApiFallback: true,
   },
+  plugins: [ new HardSourceWebpackPlugin() ],
 });

 (前略)
   "scripts": {
-    "format": "prettier --write **/*.jsx **/*.js **/*.css",
+    "format": "prettier --write **/*.jsx **/*.js **/*.tsx **/*.ts **/*.css",
     "build": "webpack --config webpack.prod.js",
     "test": "jest",
     "start": "webpack-dev-server --hot --config webpack.dev.js"
   },
 (後略)

$ yarn add -D typescript-eslint-parser

 module.exports = {
   env: {
     browser: true,
     'jest/globals': true,
   },
+  parser: 'typescript-eslint-parser',
+  parserOptions: {
+    jsx: true,
+    useJSXTextNode: false,
+  },
   extends: ['airbnb', 'prettier'],
   plugins: ['jest'],
+  settings: {
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+    },
+  },
+  rules: {
+    'react/jsx-filename-extension': ['error', { extensions: ['.tsx', '.jsx'] }],
+  },
+  overrides: [
+    {
+      files: ['**/*.ts', '**/*.tsx'],
+      rules: {
+        // Set 'no-unused-vars' to off to suppress errors on importing types.
+        // (e.g. error  'FunctionComponent' is defined but never used  no-unused-vars)
+        // Unused vars are checked by TypeScript compiler (at-loader) instead.
+        'no-unused-vars': 'off',
+      },
+    },
+  ],
 };

import React, { FunctionComponent } from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import PropTypes from 'prop-types';

// Props型の定義
interface Props {
  text: string;
  open: boolean;
}

// Function Componentの定義
const MyDialog: FunctionComponent<Props> = ({ text, open }) => (
  <Dialog open={open}>
    <DialogTitle>{text}</DialogTitle>
  </Dialog>
);

MyDialog.propTypes = {
  text: PropTypes.string.isRequired,
  open: PropTypes.bool.isRequired,
};

export default MyDialog;

export interface HogeState {
  clicked: boolean;
}

export interface Store {
  hoge: HogeState;
}

 import React from 'react';
 import Button from '@material-ui/core/Button';
 import { connect } from 'react-redux';
 import { hogeButtonClicked } from '../actions/actions';
+import { Store } from '../configureStore';

 const HogeButton = connect(
-  ({hoge}) => ({
+  ({hoge}: Store) => ({
     clicked: hoge.clicked
   }),
   {
     onClick: hogeButtonClicked,
   },
 )(Button);

 export default HogeButton;

+import Redux from 'redux';

 import {
   HOGE_BUTTON_CLICKED,
   HOGE_FETCH_SUCCEEDED,
   HOGE_FETCH_FAILED,
 } from './actionTypes';

+// Action型の定義。
+export interface HogeAction<Type, Payload = undefined, Meta = undefined>
+  extends Redux.Action<Type> {
+  error?: boolean;
+  payload?: Payload;
+  meta?: Meta;
+}

+// 型エイリアスによるAction型の具体化。
+// 「typeof HOGE_BUTTON_CLICKED」で文字列リテラル型を指定している。
+export type HogeButtonClicked = HogeAction<typeof HOGE_BUTTON_CLICKED>;
-export function hogeButtonClicked() {
+export function hogeButtonClicked(): HogeButtonClicked {
   return {
     type: HOGE_BUTTON_CLICKED,
   };
 }

+// payloadの型の定義。
+interface HogeFetchSucceededPayload {
+  hoge: string;
+}
+// インターフェースによるAction型の具体化。payloadプロパティを必須化している。
+export interface HogeFetchSucceeded
+  extends HogeAction<typeof HOGE_FETCH_SUCCEEDED, HogeFetchSucceededPayload, Object> {
+  payload: HogeFetchSucceededPayload;
+}
-export function hogeFetchSucceeded(payload, meta) {
+export function hogeFetchSucceeded(
+  payload: HogeFetchSucceededPayload,
+  meta: Object,
+): HogeFetchSucceeded {
   return {
     type: HOGE_FETCH_SUCCEEDED,
     payload,
     meta,
   };
 }

+export type HogeFetchFailed = HogeAction<typeof HOGE_FETCH_FAILED, Object>;
-export function hogeFetchFailed(payload) {
+export function hogeFetchFailed(payload: Object): HogeFetchFailed {
   return {
     type: HOGE_FETCH_FAILED,
     error: true,
     payload,
   };
 }

+import { Reducer } from 'redux';
+import { HogeState } from '../configureStore';
 import { HOGE_BUTTON_CLICKED } from '../actions/actionTypes';
+import { HogeButtonClicked } from '../actions/actions';

-export const hoge = (state = { clicked: false }, action) => {
+export const hoge: Reducer<HogeState, HogeButtonClicked> = (
+  state = { clicked: false },
+  action,
+) => {
   switch (action.type) {
     case HOGE_BUTTON_CLICKED:
       const newHoge = {
         clicked: true,
       };
       return Object.assign({}, state, newHoge);
     default:
       return state;
   }
 }

 import { createGlobalStyle } from 'styled-components';
-import roboto300 from '../node_modules/typeface-roboto/files/roboto-latin-300.woff';
+const roboto300 = require('../node_modules/typeface-roboto/files/roboto-latin-300.woff');

 const Fonts = createGlobalStyle`
   /* roboto-300normal - latin */
   @font-face {
     font-family: 'Roboto';
     font-style: normal;
     font-display: swap;
     font-weight: 300;
     src:
       local('Roboto Light'),
       local('Roboto-Light'),
       url('${roboto300}') format('woff');
   }
 `;

 export default Fonts;

$ yarn add -D @babel/preset-typescript

 {
   "presets": [
     [
       "@babel/preset-env",
       {
         "useBuiltIns": "usage"
       }
     ],
+    "@babel/preset-typescript",
     "@babel/preset-react"
   ],
   "plugins": ["styled-components", "@babel/plugin-syntax-dynamic-import"]
 }

 // For a detailed explanation regarding each configuration property, visit:
 // https://jestjs.io/docs/en/configuration.html

 module.exports = {
   // All imported modules in your tests should be mocked automatically
   // automock: false,

   // Stop running tests after the first failure
   // bail: false,

   // Respect "browser" field in package.json when resolving modules
   // browser: false,

   // The directory where Jest should store its cached dependency information
   // cacheDirectory: "C:\\Users\\kaitoy\\AppData\\Local\\Temp\\jest",

   // Automatically clear mock calls and instances between every test
   // clearMocks: false,

   // Indicates whether the coverage information should be collected while executing the test
   // collectCoverage: false,

   // An array of glob patterns indicating a set of files for which coverage information should be collected
   // collectCoverageFrom: null,

   // The directory where Jest should output its coverage files
   coverageDirectory: 'coverage',

   // An array of regexp pattern strings used to skip coverage collection
   // coveragePathIgnorePatterns: [
   //   "\\\\node_modules\\\\"
   // ],

   // A list of reporter names that Jest uses when writing coverage reports
   // coverageReporters: [
   //   "json",
   //   "text",
   //   "lcov",
   //   "clover"
   // ],

   // An object that configures minimum threshold enforcement for coverage results
   // coverageThreshold: null,

   // Make calling deprecated APIs throw helpful error messages
   // errorOnDeprecated: false,

   // Force coverage collection from ignored files usin a array of glob patterns
   // forceCoverageMatch: [],

   // A path to a module which exports an async function that is triggered once before all test suites
   // globalSetup: null,

   // A path to a module which exports an async function that is triggered once after all test suites
   // globalTeardown: null,

   // A set of global variables that need to be available in all test environments
   // globals: {},

   // An array of directory names to be searched recursively up from the requiring module's location
   // moduleDirectories: [
   //   "node_modules"
   // ],

   // An array of file extensions your modules use
-  // moduleFileExtensions: [
-  //   "js",
-  //   "json",
-  //   "jsx",
-  //   "node"
-  // ],
+  moduleFileExtensions: [
+    "ts",
+    "tsx",
+    "js",
+    "json",
+    "jsx",
+    "node"
+  ],

   // A map from regular expressions to module names that allow to stub out resources with a single module
   // moduleNameMapper: {},

   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
   // modulePathIgnorePatterns: [],

   // Activates notifications for test results
   // notify: false,

   // An enum that specifies notification mode. Requires { notify: true }
   // notifyMode: "always",

   // A preset that is used as a base for Jest's configuration
   // preset: null,

   // Run tests from one or more projects
   // projects: null,

   // Use this configuration option to add custom reporters to Jest
   // reporters: undefined,

   // Automatically reset mock state between every test
   // resetMocks: false,

   // Reset the module registry before running each individual test
   // resetModules: false,

   // A path to a custom resolver
   // resolver: null,

   // Automatically restore mock state between every test
   // restoreMocks: false,

   // The root directory that Jest should scan for tests and modules within
   // rootDir: null,

   // A list of paths to directories that Jest should use to search for files in
   // roots: [
   //   "<rootDir>"
   // ],

   // Allows you to use a custom runner instead of Jest's default test runner
   // runner: "jest-runner",

   // The paths to modules that run some code to configure or set up the testing environment before each test
   // setupFiles: [],

   // The path to a module that runs some code to configure or set up the testing framework before each test
   // setupTestFrameworkScriptFile: null,

   // A list of paths to snapshot serializer modules Jest should use for snapshot testing
   // snapshotSerializers: [],

   // The test environment that will be used for testing
   // testEnvironment: "jest-environment-jsdom",

   // Options that will be passed to the testEnvironment
   // testEnvironmentOptions: {},

   // Adds a location field to test results
   // testLocationInResults: false,

   // The glob patterns Jest uses to detect test files
   // testMatch: [
   //   "**/__tests__/**/*.js?(x)",
   //   "**/?(*.)+(spec|test).js?(x)"
   // ],

   // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
   // testPathIgnorePatterns: [
   //   "\\\\node_modules\\\\"
   // ],

   // The regexp pattern Jest uses to detect test files
   // testRegex: "",

   // This option allows the use of a custom results processor
   // testResultsProcessor: null,

   // This option allows use of a custom test runner
   // testRunner: "jasmine2",

   // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
   testURL: 'http://localhost/',

   // Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout"
   // timers: "real",

   // A map from regular expressions to paths to transformers
-  // transform: null,
+  transform: {
+    '^.+\\.jsx?$': 'babel-jest',
+    '^.+\\.tsx?$': 'babel-jest',
+  },

   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
   // transformIgnorePatterns: [
   //   "\\\\node_modules\\\\"
   // ],

   // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
   // unmockedModulePathPatterns: undefined,

   // Indicates whether each individual test should be reported during the run
   // verbose: null,

   // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
   // watchPathIgnorePatterns: [],

   // Whether to use watchman for file crawling
   // watchman: true,
 };