React
React、Webpack＆Typescriptのインストール

備考

npm install --save @types/react @types/react-dom

webpack.config.js

module.exports = {
    entry: './src/index',
    output: {
        path: __dirname + '/build',
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.tsx?$/,
            loader: 'ts-loader',
            exclude: /node_modules/
        }]
    },
    resolve: {
        extensions: ['.ts', '.tsx']
    }
};

主なコンポーネントは次のとおりです（標準entry 、 output 、その他のWebpackプロパティに加えて）。

ローダー

このためには、 .tsと.tsxファイル拡張子をテストするルールを作成し、 ts-loaderとして指定する必要があります。

TS拡張を解決する

また、 .tsと.tsx拡張子をresolve配列に追加する必要があります。そうしないと、webpackはそれらを表示しません。

tsconfig.json

これはあなたを動かすための最小のtsconfigです。

{
    "include": [
        "src/*"
    ],
    "compilerOptions": {
        "target": "es5",
        "jsx": "react",
        "allowSyntheticDefaultImports": true
    }
}

プロパティを1つずつ移動してみましょう：

include

これはソースコードの配列です。ここでは、 srcディレクトリ内のすべてをコンパイルに含めることを指定するsrc/*エントリが1つしかありません。

compilerOptions.target

ES5ターゲットにコンパイルすることを指定します。

compilerOptions.jsx

これをtrue設定すると、TypeScriptは自動的にReact.createElement("div")構文を<div />からReact.createElement("div")コンパイルします。

compilerOptions.allowSyntheticDefaultImports

あなたがES6モジュールであるかのようにノードモジュールをインポートできるハンディープロパティー。

import * as React from 'react'
const { Component } = React

あなたはちょうどできます

import React, { Component } from 'react'

Reactにデフォルトのエクスポートがないというエラーは表示されません。

私の最初のコンポーネント

import React, { Component } from 'react';
import ReactDOM from 'react-dom';


interface AppProps {
    name: string;
}
interface AppState {
    words: string[];
}

class App extends Component<AppProps, AppState> {
    constructor() {
        super();
        this.state = {
            words: ['foo', 'bar']
        };
    }

    render() {
        const { name } = this.props;
        return (<h1>Hello {name}!</h1>);
    }
}

const root = document.getElementById('root');
ReactDOM.render(<App name="Foo Bar" />, root);

ReactでTypeScriptを使用する場合、React DefinitelyTyped型定義（ npm install --save @types/react ）をダウンロードするnpm install --save @types/react 、すべてのコンポーネントでタイプ注釈を追加する必要があります。

あなたはこうします：

class App extends Component<AppProps, AppState> { }

ここで、 AppPropsとAppStateは、それぞれコンポーネントの小道具や州のインタフェース（またはタイプエイリアス）です。