はじめに

インストール

このエントリーをはてなブックマークに追加
最終更新日 2016-12-31

TypeScript コンパイラをインストールするためには、Node.js のパッケージを利用する方法と、 Visual Studio のプラグインを利用する方法があります。

npm

前提としてすでに Node.js がインストールされており、npm コマンドが利用可能な状態であるとします。 npm を利用して TypeScript をインストールするためには、以下のコマンドを実行します。(環境によっては npm の前に sudo を付ける必要があるかもしれません。)

npm install -g typescript

インストールが完了すると、TypeScript のコンパイラである tsc コマンドが利用可能になります。

tsc --help

例として、以下のような TypeScript のソースコードを hello.ts というファイル名で保存し、コンパイルします。

class Greeter {
    private greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    public greet() {
        console.log("Hello, " + this.greeting);
    }
}
var greeter = new Greeter("TypeScript");
greeter.greet();
tsc hello.ts

コンパイルが成功すると、同じディレクトリに以下のような hello.js ファイルが作成されます。

var Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        console.log("Hello, " + this.greeting);
    };
    return Greeter;
})();
var greeter = new Greeter("TypeScript");
greeter.greet();

Node.js では以下のコマンドで JavaScript ファイルを実行できます。

node hello.js

Microsoft Visual Studio 2013 Update 2

前提としてすでに Visual Studio 2013 がインストールされているものとします。 Microsoft Visual Studio 2013 Update 2 は Microsoft のダウンロードサイトからダウンロードしてインストールします。

インストールが完了すると、Visual Studio 2013 の[ファイル]-[新規作成]-[プロジェクト]で開く[新しいプロジェクト]ウィンドウの左側に[TypeScript]が追加されます。

プロジェクト作成が完了すると、以下のファイルが生成されます。

ファイル名 説明
app.css index.html から読み込まれる CSS ファイル
app.ts TypeScript ファイル
index.html app.ts をコンパイルして生成される app.js を読み込む HTML ファイル

app.ts を編集すると、自動的にコンパイルされて app.js が生成されます。

TypeScript for Visual Studio 2012

TypeScript for Visual Studio 2012 を利用して TypeScript をインストールするためには、 Microsoft のダウンロードサイトからダウンロードしてインストールします。

TypeScript for Visual Studio 2012 は Visual Studio 2012 がインストールされていなくても利用できます。 Visual Studio 2012 がインストールされていない場合は、コマンドプロンプトから TypeScript のコンパイラである tsc コマンドが利用可能になります。

tsc --help

Visual Studio 2012 がインストールされている場合は、TypeScript for Visual Studio 2012 のインストールが完了すると、 Visual Studio 2012 の[ファイル]-[新規作成]-[プロジェクト]で開く[新しいプロジェクト]ウィンドウの左側に[TypeScript]が追加されます。

プロジェクト作成が完了すると、以下のファイルが生成されます。

ファイル名 説明
app.css index.html から読み込まれる CSS ファイル
app.ts TypeScript ファイル
index.html app.ts をコンパイルして生成される app.js を読み込む HTML ファイル

app.ts を編集すると、自動的にコンパイルされて app.js が生成されます。

Playground

Playground を利用すると、 TypeScript コンパイラをインストールしなくても TypeScript を実行することができます。