TypeScript - 環境構築 ~ Hello,World まで

公開日:2019-01-13

1. 概要

TypeScript は、マイクロソフトが開発しているプログラミング言語です。
ブラウザで動かすには、TypeScript のソースを JavaScript に変換(トランスパイル)する必要があります。
今回は、Windows上で Visual Studio を使って変換し、ブラウザに Hello,World を表示するところまで行います。

2.1 環境構築 - Visual Studio 2017

Visual Studio 2017 のインストール

Visual Studio のインストールが済んでいる場合は、
Windowsのスタートメニューから、Visual Studio Installer をクリックします。
画像1

詳細の▼をクリックして、「変更」をクリックします。
画像2

Node.js 開発にチェックを入れて、右下の変更ボタンをクリックしてください。
画像3

2.2 環境構築 - node.js

node.js ダウンロードから、Windows Binary (.zip)をダウンロードします。
64bit の OS を使っていますが、今回は 32bit をダウンロードしました。
解凍・リネームして、d:\nodejs に配置しました。
場所はどこでも良いと思います。念のため、パスにスペースを含まない場所の方が良いかもしれません。
以下に出てくるパスは、適宜変更してください。

コマンドプロンプトを起動して、以下のコマンドを実行します。
コマンドプロンプト
set PATH=%PATH%;d:\nodejs
node -v
バージョンが表示されればOKです。
上記コマンドの1つ目で nodejs にパスを通しています。
nodejs のコマンドを実行する際は、コマンドプロンプトを起動する度に毎回実行してください。
面倒な場合は、以下のバッチファイルを作って、コマンドプロンプトを起動するようにしてください。
cmd_for_nodejs.bat
set PATH=%PATH%;d:\nodejs
cmd /k

2.3 環境構築 - webpack

webpackのインストールを行います。

まず、Webサイト用のフォルダを作成します。
今回は d:\nodejs_test にしました。

コマンドプロンプトで、以下のコマンドを実行します。
コマンドプロンプト
cd d:\nodejs_test
npm init -y
npm install --save-dev webpack
npm install --save-dev webpack-cli

また、試しに TypeScript から jquery を使ってみたいので、以下も実行します。
コマンドプロンプト
npm install --save-dev @types/jquery

3. Visual Studio でプロジェクトの作成

VS を起動して、新規プロジェクトの作成を行います。
TypeScript/Node.js の「既存の Node.js コードから」を選択し、
「場所」に「d:\nodejs_test」を指定して OK を押します。
ウィザードは何もせずに完了をクリックします。

プロジェクトが作成されると、画面上部に警告が表示されます。
警告の右側にある「プロジェクトのプロパティを構成する」をクリックします。
画面真ん中の node.exeパスに、node.exe のパスを入力します。
今回は「D:\nodejs\node.exe」と入力しました。

以下4つのファイルを追加します。

test.ts
export function test() {
  $("body").css("background-color", "lightblue");
  $("#msg").html("Hello, World");
}

$("#btn").on("click", test);

test.html
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head><meta charset="utf-8" /><title>TypeScript</title></head>
<body>
  <input type="button" id="btn" value="click" />
  <div id="msg"></div>

  <script src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>

  <script src="dist/bundle.js"></script>
</body>
</html>

index.js
var test = require("./test");

webpack.config.js
const path = require('path');

module.exports = {
  mode: 'development',

  entry: './index.js',

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

.tsファイル(TypeScript) は、Visual Studio で保存すると、
自動的に .js(JavaScript) に変換されます。
変換した .js をブラウザで使えるようにするため、以下のコマンドを実行します。
コマンドプロンプト
cd d:\nodejs_test
npx webpack

ブラウザで test.html を開き、ボタンをクリックして、画面の背景が変われば完了です。
画像4