TypeScript - Visual Studio を使わずにトランスパイルする

公開日:2019-01-14 更新日:2019-05-14

1. 概要

Visual Studio を使わずに TypeScript をトランスパイルします。
node.js のインストールと環境変数の設定は完了しているものとします。

2. 環境構築

プロジェクト用のフォルダを作成します。
今回は d:\nodejs_test を作成しました。以降、パスを適宜、変更してください。

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

以下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="app.js"></script>
</body>
</html>

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

module.exports = {
	mode: 'development',
	
	entry: './test.js',

	output: {
		path: __dirname,
		filename: 'app.js'
	}
};

.tsファイルを、.jsファイルにトランスパイルします。
npx tsc -t ES6 test.ts
問題がなければ、test.js が出力されます。
また、「-t ES5」にすると、ES5 の形式でトランスパイルされます。

次に、以下のコマンドを実行して、ブラウザで実行できるようにします。
実行すると、app.js ファイルが出力されます。これを html で読み込んで使用します。
npx webpack

ブラウザで test.html にアクセスして、ボタンをクリックして背景色が変われば完了です。