TypeScript

TypeScript開発環境構築(Webpack版)

私は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をいれてみようと思っている方は試してみてはいかがでしょうか?

ご意見、ご感想等ございましたら、↓よりコメントお願いします。励みになります。

以上です。今後ともよろしくお願いします。

-TypeScript

Copyright© 婿入りエンジニア、ブログ書く , 2019 All Rights Reserved.