吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【TypeScript】React + TypeScript + webpack の環境を作ってみる

2017年6月30日 / category : lab, typescript

ようやく最近Reactの勉強を始めました。
が、私が受託しているWeb制作では未だ需要はなく、実務で使用することは今後もないような気がします。。。
ただ、実装者としては、とりあえずは知っておかなければ、、、
ということで、ReactをTypeScrpt+webpackで構築する環境を紹介したいと思います。
今回は、構築環境の紹介ですので、Reactについての説明は割愛させていただきます。

react, react-domをインストール

まずは、Reactに必要な、react, react-domファイルをインストールします。

npm
npm install react react-dom --save

上を実行し、package.jsonのdependenciesに、reactとreact-domが追加されたことを確認します。

tsxファイルを作成

tsxファイルとはなんぞや。
Reactを実装する際に使用するjsx(JavaScriptXML)ファイルを、TypaScriptで実装する際はtsxファイルとなるようです。
このtsxファイルに、先ほどインストールしたreact, react-domをインポートします。

main.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';

続けて、簡単なReactのコードを書いておきます。

main.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';

var Test = React.createClass({
	render: function(){
		return (
			<h2>Hello</h2>
		);
	}
});

ReactDOM.render(
	<Test/>,
	document.getElementById('content')
);

idがcontentの要素に、h2要素を追加し表示します。
ちなみに、htmlは次のような感じ。

index.html
<body>
<div id="content"></div>
<script src="./js/main.js"></script>
</body>

ただ、これだけではまだエラーが出て正しく動作しません。
tsxファイルをjsファイルにコンパイルする際の設定がまだできていません。

tsxファイルをjsファイルにコンパイル

tsxファイルをjsファイルにコンパイルするために、
tsconfig.jsonの設定を次のようにします。

tsconfig.json
{
  "compilerOptions": {
    "sourceMap": false,
    "target": "ES5",
    "module": "commonjs",
    "moduleResolution": "node",
    "jsx": "react"
  },
  "files": [
    "./src/ts/main.tsx"
  ]
}

この設定で、コンパイルすると問題なくjsファイルがコンパイルされます。
ちなみに、webpack.config.jsの設定は、次の通りです。

webpack.config.js
const PATH = require('path');
const TS_PATH = PATH.join(__dirname, './src/ts');
const JS_PATH = PATH.join(__dirname, './src/js');
const webpack = require('webpack');

module.exports = [
  {
    entry: {
      'base': TS_PATH + '/main.tsx'
    },
    output: {
      path: JS_PATH,
      filename: '[name].js'
    },
    module: {
      rules: [
        {
          test: /.tsx$/,
          use: ['ts-loader']
        }
      ]
    }
  }
];

ReactのComponent部分を外部化する場合

上の例で出てきたmain.tsxの記述にあるComponent部分が次になります。

main.tsx
var Test = React.createClass({
	render: function(){
		return (
			<h2>Hello</h2>
		);
	}
});

上のコードを外部化し、次のようにしたいと思います。

Test.tsx
import * as React from 'react';

export interface Props {
	content: string;
}

export default class Component extends React.Component<Props, {}> {
  render() {
  	return <div>{this.props.content}</div>
  }
}

上のTest.tsxの説明に関しては割愛させていただきますが、Componentを外部化したコードとなります。
Test.tsxを読み込むmain.tsxは次のようになります。

main.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Test from "./Test.tsx";

ReactDOM.render(
	<Test />,
	document.getElementById('content')
);

tsxファイルに関しては、これで準備ができました。
ただ、このままだとエラーが起こります。

TypeScript用の型定義ファイルをインストール

エラーの原因は、型定義ファイルがないためです。

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

@types/react, @types/react-domをインストールします。
これで型定義がうまくいきます。

コンパイルも問題なくされるはずです。