HTML5テクニカルノート

TypeScript入門 01: Visual Studio CodeでTypeScriptのコードを書く

ID: FN1609002
Technique: HTML5 / JavaScript
Package: TypeScript 2.0.3

「TypeScript」はマイクロソフトが開発したオープンソースのプログラミング言語です(「TypeScript: とにかくJavaScriptファイルをビルドしてみる」参照)。そのマイクロソフトが提供する無償の高機能エディター「Visual Studio Code」は、もちろんTypeScriptをサポートします。本稿では、Visual Studio Codeをインストールして設定したうえで、TypeScriptの簡単なコードをビルドしてみます。なお、TypeScriptはあらかじめインストールしておいてください(「TypeScript: とにかくJavaScriptファイルをビルドしてみる」01「TypeScriptをインストールする」参照)。

01 Visual Studio Codeをインストールする

Visual Studio Codeは、クロスプラットフォームの高機能エディターです(「Visual Studio Codeの使い方、基本の『キ』」)。ダウンロードページからインストールできます(図001)。軽いアプリケーションですので、ダウンロードすればすぐに起ち上げられます。

図001■Visual Studio Codeのダウンロードページ

02 tsconfig.jsonでTypeScriptの設定を行う

TypeScriptのプロジェクト用のフォルダをつくっておきましょう(ここでは「typescript」という名前にしました)。Visual Studio Codeを起ち上げたら、左端のビューバーから[エクスプローラー]([command]/[Ctrl] + [shift] + [E])を選んで、プロジェクトのフォルダを開きます(図002)。

図002■[エクスプローラー]でフォルダーを開く

TypeScriptの設定ファイルtsconfig.jsonを、[ファイル]メニューの[新規ファイル]または[エクスプローラー]の[新たしいファイル]のボタンでつくります(図003)。以下のJSONのコードを書いて、tsconfig.jsonという名前で保存してください。ECMAScript5とCommonJSモジュールにもとづき、ソースマップを用います。

図003■[エクスプローラー]の[新たしいファイル]ボタン


{
	"compilerOptions": {
		"target": "es5",
		"module": "commonjs",
		"sourceMap": true
	}
}

03 TypeScriptからビルドするタスクをJSONファイルで定める

TypeScriptのコードからJavaScriptへのビルドをタスクとして定めます。[表示]メニューから[コマンドパレット]を開いたら([command]/[Ctrl] + [shift] + [P])、"configure"と入力して[タスク: タスクランナーの構成]([Tasks: Configure Task Ranner])を選びます(図004)。[タスクランナーの選択]は[Others 任意の外部コマンドを実行する例]とします。

図004■[コマンドパレット]で[タスク: タスクランナーの構成]を選ぶ

tasks.jsonファイルがつくられますので、つぎのように書き替えます(図005)。これで、tscが外部コマンドとして登録され、Visual Studio CodeからプロジェクトフォルダのTypeScriptファイルをJavaScriptにビルドできるようになります。tasks.jsonファイルは閉じて構いません。


{
	// See https://go.microsoft.com/fwlink/?LinkId=733558
	// for the documentation about the tasks.json format
	"version": "0.1.0",
	// "command": "echo",
	"command": "tsc",
	"isShellCommand": true,
	// "args": ["Hello World"],
	"args": ["-p", "."],
	// "showOutput": "always"
	"showOutput": "silent",
	"problemMatcher": "$tsc"
}

図005■tasks.jsonファイルをつくる

04 TypeScriptで書いたコードをビルドする

それでは、TypeScriptのコードで簡単なクラスを定めて、JavaScriptファイルにビルドしてみましょう。まず、プロジェクトのフォルダに、新たにTypeScriptファイル(拡張子.ts)をつくります(ここではsample.tsとします)。そして、以下のコード001のようにクラス(Point)を定めましょう(図006)。

TypeScriptはクラスベースのオブジェクト指向プログラミングの仕様を備えています。キーワードclassの後にクラス名を添えて定義します。コンストラクタはconstructorで関数と同じように定めます。変数や引数およびプロパティには、コロン(:)で型づけできます(「TypeScript: とにかくJavaScriptファイルをビルドしてみる」03「変数と関数に型づけする」参照)。なお、インスタンスプロパティ(xおよびy)に、var宣言はつけません。

コード001■TypeScriptのコードでクラスを定めて試す


class Point {
	x: number;
	y: number;
	constructor(x: number, y: number) {
		this.x = x;
		this.y = y;
	}
}
console.log(new Point(1, 2));

図006■TypeScriptファイルにクラスを定める

tasks.jsonに定めたタスクを実行してビルドするには、[コマンドパレット]([command]/[Ctrl] + [shift] + [P])を開いて[タスク: ビルドタスクの実行]を選びます。ビルドのタスクはたびたび使いますので、ショートカットキー[command]/[Ctrl] + [shift] + [B]を覚えましょう。

図007■[タスク: ビルドタスクの実行]でビルドする

正しくビルドされると、TypeScriptファイルと同じ名前のJavaScriptファイル(拡張子.js)とソースマップ(拡張子.map)がつくられます(図008)。このJavaScriptファイルを、HTMLドキュメントに<script>要素で読み込めばよいのです。

図008■ビルドされたJavaScriptファイル

05 Visual Studio Codeでコードを試す

Visual Studio Codeのデバッグの機能で、コードを試してみましょう。左端のビューバーで[デバッグ]([command]/[Ctrl] + [shift] + [D])に切り替えます。[デバッグの開始]([F5])ボタンを押して、[環境の選択]は[Node.js]を選んでください。

図009■[デバッグの開始]で[Node.js]を選ぶ

すると、アプリケーションの構成ファイルをセットアップするよう求められ、launch.jsonファイルがつくられるので、つぎの2行を修正します。configurationsのprogramには試すJavaScriptファイルのパスを与え、sourceMapsはtrueとします。launch.jsonファイルを保存したら、閉じて構いません。


{

	"configurations": [
		{

			// "program": "${workspaceRoot}/app.js",
			"program": "${workspaceRoot}/sample.js",

			// "sourceMaps": false,
			"sourceMaps": true,

		},

	]
}

改めて[デバッグの開始]ボタンを押して、[表示]メニューから[デバッグコンソール]([command]/[Ctrl] + [shift] + [Y])を開くと、つぎのようにconsole.log()メソッドの戻り値が示されます(前掲コード001参照)。確かめたら、[停止]ボタンでデバッグを終えます(図010)。


Point { x: 1, y: 2 }

図010■デバッグを[停止]する

作成者: 野中文雄
更新日: 2016年9月23日 TypeScriptのバージョンを2.0.3に更新。
作成日: 2016年9月10日