React
React、Webpack＆Typescriptのインストール
サーチ…
備考
エディタ（VSコードなど）で構文の強調表示を取得するには、プロジェクトで使用するモジュールの入力情報をダウンロードする必要があります。
たとえば、あなたのプロジェクトでReactとReactDOMを使用している場合、それらのためにハイライトとIntellisenseを取得したいとします。次のコマンドを使用して、タイプをプロジェクトに追加する必要があります：
npm install --save @types/react @types/react-dom
あなたのエディタはこのタイピング情報を自動的に取得し、これらのモジュールに対してオートコンプリートとIntellisenseを提供するようになりました。
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は、それぞれコンポーネントの小道具や州のインタフェース（またはタイプエイリアス）です。
