私は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をいれてみようと思っている方は試してみてはいかがでしょうか?
ご意見、ご感想等ございましたら、↓よりコメントお願いします。励みになります。
以上です。今後ともよろしくお願いします。