Type Scriptはマイクロソフトが開発したプログラミング言語です.それはJavaScriptの1つのタイプのオーバーセットで、独立したコンパイラを含みます.タイプ言語としては、Type Scriptは構築時にバグやエラーを発見することができます.このようなエラーを回避することができます.webpack、React、Type Scriptの集積方式は以下の通りです.
第三者ライブラリを使用する場合は、Reactライブラリのような第三者ライブラリのタイプ宣言ファイルを同時にインストールし、@types/reactをインストールします.
Type Scriptをインストールして、プロジェクトファイルを包装します.
1.Type Scriptをインストールしたらtscコマンドを使用できます.

npm install -g typescript 
npm update -g typescript

2.インストールが成功したらtsバージョンを確認する:tsc -v3.ローカルに新しいフォルダwebpack-react-typescriptを作成し、webpack、Reactに関する依存性をインストールし、TypeScriptコンパイラとTypecriptファイルを処理するloaderをインストールし、第三者ライブラリをインストールする時は一緒に第三者ライブラリのタイプファイルをインストールします.

npm init -y
npm install webpack webpack-cli --save-dev
npm install --save react react-dom
npm install --save-dev @types/react @types/react-dom
npm install --save-dev typescript ts-loader source-map-loader

4.Type Scriptコンパイラを設定し、設定項目がなく、コンパイラは何の助けも提供できません.npmユーザ実行コマンドnpx tsc --initは、tsconfig.jsonファイルを生成するか、または手動でtsconfig.jsonを新たに作成し、次のような構成項目を入力する.

//tsconfig.json
{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "es6",
        "target": "es5",
        "jsx": "react",
        "allowJs": true
    },
    "include": ["src"],
    "exclude": ["node_modules", "dist"]
}

5.ルートディレクトリの下にsrc/components/Hello.tsx，src/index.tsxを新設し、ソースファイルの拡張子はtsファイルであってもよく、jsx文法を含むtsxファイルであっても良い.

//src/components/Hello.tsx
import * as React from "react";
export interface HelloProps { compiler: string; framework: string; }
export const Hello = (props: HelloProps) => 
Hello from {props.compiler} and {props.framework}!
;

//src/index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Hello } from "./components/Hello";
ReactDOM.render(
    ,
    document.getElementById("app")
);

6.ルートディレクトリの下にindex.htmlを新設する.

//index.html


    
        
        
    
    
        


        
        
        
        
        
        
    

7. webpackプロファイルwebpack.config.js

//webpack.config.js
const path = require('path')

module.exports = {
    mode: 'development',
    devtool: 'source-map',
    entry: {
        main: './src/index.tsx'
    },
    output:{
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    externals: {
        'react': 'React',
        'react-dom': 'ReactDOM'
    }
}

8. webpack

E:\workCode\webpack-react-typescript>webpack
Hash: 429f98c0d81c6dd61331
Version: webpack 4.39.0
Time: 1583ms
Built at: 2019-08-02 14:10:47
      Asset      Size  Chunks             Chunk Names
    main.js  6.01 KiB    main  [emitted]  main
main.js.map  4.54 KiB    main  [emitted]  main
Entrypoint main = main.js main.js.map
[./src/index.tsx] 244 bytes {main} [built]
[react] external "React" 42 bytes {main} [built]
[react-dom] external "ReactDOM" 42 bytes {main} [built]
    + 1 hidden module

9.ブラウザで index.を くと、ページがHello from TypeScript and React!に されます.
http://www.typescriptlang.org/docs/handbook/react-&-webpack.https://www.webpackjs.com/guides/typescript/https://react.docschina.org/docs/static-type-checking.html