私はTypeScriptを使って開発をおこなっていますが、型安全による恩恵が半端じゃないですね。
今日は、そんな便利なTypeScriptの開発環境を構築してみます。
せっかくですので新しいことをに挑戦してみたいので、
Webpackを使った開発環境に初挑戦してみようと思います。
Webpackがどんなものなのかは、以下ページでわかりやすく解説されていました。
https://qiita.com/kamykn/items/45fb4690ace32216ca25
開発環境
・Windows10 Pro
事前準備
既にインストール済みの方は飛ばしてください。
node.jsのインストール
1.以下よりダウンロードし、インストール実行してください。
node.jsダウンロードページを開く
基本的になりで進めればOKです。
2.node.js動作確認
コマンドプロンプトかWindows PowerShellで以下実行。
結果例のように表示されたらOKです。
node -v
[結果例]
v10.13.0
TypeScriptのインストール
コマンドプロンプトかWindows PowerShellで以下実行。
npmでTypeScriptをインストールしてからバージョン情報を表示させています。
npm install -g typescript tsc -v
[結果例]
C:\Users\<ユーザー名>\AppData\Roaming\npm\tsserver -> C:\Users\<ユーザー名>\AppData\Roaming\npm\node_modules\typescript\bin\tsserver C:\Users\<ユーザー名>\AppData\Roaming\npm\tsc -> C:\Users\<ユーザー名>\AppData\Roaming\npm\node_modules\typescript\bin\tsc + typescript@3.2.2 updated 1 package in 1.336s Version 3.2.2
最後にバージョン情報が出たらOKです。
TypeScript開発環境構築構築
ワークスペースの作成
コマンドプロンプトかWindows PowerShellで以下実行。
今回のワークスペースは「C:\tsTest」とします。
cd c:\ mkdir tsTest cd tsTest
tsconfig.jsonの出力
型の扱いをどうするか、などのコンパイル時の設定を行うファイルを出力します。
今回は環境を作るまでなので、デフォルト値とします。
tsc --init
webpackのインストール
各Webpackパッケージをインストールすることで、自動コンパイルなどを可能にしてくれます。
ts-loaderがあることで、TypeScriptをWebpackに紐づけてコンパイルすることが可能です。
npm init --y npm install --save-dev typescript ts-loader webpack webpack-cli webpack-dev-server
package.jsonの修正
webpackが自動動作するように書き変えます。
package.json
=======================
{
"name": "tsTest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --mode=development",
"start": "webpack-dev-server --mode=development"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"ts-loader": "^5.3.1",
"typescript": "^3.2.2",
"webpack": "^4.27.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
}
webpack.config.jsの生成
package.jsonと同一階層に作成します。
webpack.config.js
=====================
const path = require('path');
module.exports = {
entry: {
bundle: './src/app.ts'
},
output: {
path: path.join(__dirname,'dst'),
filename: '[name].js'
},
resolve: {
extensions:['.ts','.js']
},
devServer: {
// webpack-dev-serverの公開フォルダ
contentBase: path.join(__dirname,'dst')
},
module: {
rules: [
{
test:/\.ts$/,loader:'ts-loader'
}
]
}
}
html/ts配備
html作成
C:\tsTest\dst\index.htmlとして以下を作成。
index.html
=====================
<!DOCTYPE html>
<html lang='ja'>
<head>
<title>Hello world</title>
</head>
<body>
<div id="disp"></div>
<script src="bundle.js"></script>
</body>
</html>
ts作成
C:\tsTest\src\app.tsとして以下を作成。
app.ts
=====================
let hello : string = 'ハロー';
let disp = document.getElementById('disp');
if (disp){
disp.innerHTML = hello;
}
動作確認
サーバー起動
npm start
移行、サーバーが起動している間は、自動でコンパイルされて反映されるようになります。
画面確認
https://localhost:8080/ を開いて以下のように表示されていればOKです。
コンパイルエラーの確認
helloの型をわざとnumber型に変更してみます。
app.ts
======================
let hello : number = 'ハロー';
let disp = document.getElementById('disp');
if (disp){
disp.innerHTML = hello;
}
[結果]
ERROR in C:\tsTest\src\app.ts
./src/app.ts
[tsl] ERROR in C:\tsTest\src\app.ts(1,5)
TS2322: Type '"ハロー"' is not assignable to type 'number'.
ERROR in C:\tsTest\src\app.ts
./src/app.ts
[tsl] ERROR in C:\tsTest\src\app.ts(4,5)
TS2322: Type 'number' is not assignable to type 'string'.
i ｢wdm｣: Failed to compile.
自動コンパイルが走って、期待通りの怒られ方をしました。
最後に
結構簡単にできましたね。
これからTypeScriptをいれてみようと思っている方は試してみてはいかがでしょうか？
ご意見、ご感想等ございましたら、↓よりコメントお願いします。励みになります。
以上です。今後ともよろしくお願いします。