モダンなWebアプリケーションでは、JavaScriptコードの量は日に日に増しています。多くのコードが必要になる中で、それらすべてを一つのファイル内で開発することは不可能といってよいでしょう。

そこでTypeScriptを利用すれば、ファイルが分かれている状態でも型が解決できるようになっており、モジュールごとにファイルを分割した開発が可能になります。加えて、型定義ファイルを用意することで、既存のJavaScriptライブラリを改変することなく、そのまま利用することができます。

今回は、Modules/AsynchronousDefinition（AMD）、または、CommonJSの仕様に準拠したモジュール機構や、既存のJavaScriptライブラリの利用方法について紹介します。

環境構築

連載第1回で紹介したSublimeText3用のプラグインは、現在のところ、ファイルを超えたインテリセンスなどの支援をサポートしていません。ですが開発版では利用できるため、プラグインをプロジェクトをdevブランチに切り替えます。

Sublime Textを開き、ツールバーから「Preferences」の「Browse Packages…」を選択します。開いたフォルダ内のT3Sフォルダをターミナルで開きます。

第1回目のインストール時にはGitを利用して導入しているので、ただブランチを切り替えるだけでプラグインの更新は完了です。

$ git checkout dev

次に、プロジェクトフォルダを作成します。SublimeTextは、任意のフォルダをプロジェクトとして開くことができます。ツールバーから「File」の「Open Folder…」を選択し、プロジェクトにするフォルダを開きます。この解説では、”ts_project”フォルダを新規作成したものとします。

そして、プロジェクトフォルダ直下に”.sublimets”ファイルを新規作成します。この設定ファイルにプロジェクトの設定を記述します。今回は次のように設定します。

{
    "root": "app.ts", 
    "settings": {
        "activate_build_system":true,
        "auto_complete":true,
        "node_path":"none",
        "error_on_save_only":false,
        "build_on_save":true,
        "show_build_file":true,
        "build_parameters":{
            "pre_processing_commands":[],
            "post_processing_commands":[],
            "output_dir_path":"./build",
            "concatenate_and_emit_output_file_path":"none",
            "source_files_root_path":"none",
            "map_files_root_path":"none",
            "module_kind":"amd",
            "allow_bool_synonym":false,
            "allow_import_module_synonym":false,
            "generate_declaration":false,
            "no_implicit_any_warning":true,
            "skip_resolution_and_preprocessing":false,
            "remove_comments_from_output":false,
            "generate_source_map":true,
            "ecmascript_target":"ES5"
        }
    }
}

外部モジュール

前回（第三回）では、名前空間を構成する内部モジュールを紹介しました。TypeScriptでは、この内部モジュールとは異なり、外部モジュールと呼ばれるモジュール機構があります。外部モジュールでは、プログラムをファイル単位でモジュール化することができ、ビルドオプションによって、AMD、または、CommonJSの仕様に準拠したJavaScriptコードを生成することができます。

前回のおさらいですが、内部モジュールは、

module

export

module Sample{
	export Class Class1{}
	class Class2{} 
}
var class1 = new Sample.Class1();
var class2 = new Sample.Class2();  // error

外部モジュールでは、TypeScriptファイル自体がモジュール化され、他のTypeScriptファイルからインポートすることができるようになります。外部モジュールを記述するには、トップレベルにexportキーワードを付け、インポートには

import - require

module

settings.build_parameters.module_kind

amd

commonjs

export class Class1();
class Class2();

import Sample = require("classes")
var class1 = new Sample.Class1();
var class2 = new Sample.Class2(); // error

require

export module A{
	export class Class1{}
	class Class2{}
}
export module B {
	export class Class3{}
}

import modules = require("modules");
var class1 = new Modules.A.Class1();
var class3 = new Modules.B.Class3();

内部モジュールを利用し、名前空間を切りつつ、外部モジュールを利用して、コンポーネント化することができます。 外部モジュールのコードをコンパイルすると、require文が出力されますが、前述のとおりビルドオプションを設定することで、AMDまたはCommonJSのどちらかに出力することが可能です。フロントエンドで使用する場合はAMD形式に出力し、require.jsを利用してロードします。

リファレンスパス

require.jsを使わず、ただ、HTMLにscriptタグを連ねてファイル分けを行う場合には、リファレンスパスを利用します。リファレンスパスはコメント文を利用しており、

/// <reference path="sample.ts"/>

...
<script src="sample.js"></script>
<script src="app.js"></script>
...

module Sample {
	export class Class1{}
}

/// <reference path="sample.ts"/>
var class1 = new Sample.Class1();

型定義ファイル

先のリファレンスパスを利用することで、既存のJavaScriptライブラリを利用することができます。 TypeScriptでは、

declare

アンビエントは、型の定義のみで実装を持ちません。そのため、インターフェースはすでにアンビエントです。インターフェース以外の変数やクラスは

declare

アンビエント宣言は別ファイルに分離し、拡張子を

.d.ts

var MyLib = {
    version: "1.0.0"
    , message: "Hello"
    , output: function () {
        console.log(this.message);
    }
}

declare var MyLib: {
    version: string;
    message: string;
    output: ()=>void;
};

/// <reference path="mylib.d.ts"/>
MyLib.output();

このように、型定義ファイルを用意することで既存のJSライブラリに手を加えず、そのままTypeScriptで利用できます。また、jQUeryなどの人気のあるJavaScriptライブラリの型定義ファイルはTSD(TypeScript Definition manager)を使用することでダウンロードできます。TSDは、型定義ファイルのリポジトリ、DefinitelyTypedのマネージャでDefinitelyTypedに集まっている多くの型定義ファイルを管理できます。

TSDはNPMからインストールします。

$ npm install -g tsd

このTSDを用いて、jQueryの型定義ファイルをダウンロードしてみます。

$ tsd query jquery --action install

ダウンロードした型定義ファイルをリファレンスパスで参照することで、jqueryを利用するコードをTypeScriptで記述することができます。

また、

declaration

まとめ

全４回でTypeScriptを紹介してきました。第1回目で述べた通り、TypeScriptは次の特徴を持った言語です。

• JavaScriptのコードそのまま解釈でき、既存コードから開発をスタートできる。
• また、クラスやインターフェース、モジュール化などでコンポーネント化がより容易になる。
• かつ、型の検査やインテリセンス、リッチデバッグ環境で大規模開発を助けてくれる。

繰り返しになりますが、TypeScriptは型注釈を行うことで、型の不一致から発生するバグを実行前に検知し修正することができます。また、クラスや内部モジュールや外部モジュールによって、コンポーネント化が容易になります。

また、TypeScriptはJavaScriptのスーパーセットでもあり、次世代JavaScriptの仕様を先取りしているだけでなく、アンビエント宣言を用いることで既存のJavaScriptライブラリも型注釈して利用できます。開発環境に関しても、この連載ではSublime Text 3を取り上げましたが、Visual StudioやIntelliJ IDEAなどTypeScriptを力強くサポートしてくれるIDEもあります。

ぜひ皆さんも、TypeScriptでモダンなWebアプリケーション開発を体験してみてください！

クラス・インターフェース・モジュールは大規模な開発を行う際の強力な味方であり、TypeScriptの重要な機能の一つです。連載第3回目となる今回は、オブジェクト指向に欠かせないクラスについて紹介します。

クラス

JavaScriptはプロトタイプベースの言語であり、静的なクラスではありません。しかし、多くのライブラリにて静的なクラスを再現する機能が実装され、利用されています。TypeScriptでは、静的なクラスが使用でき、多くのクラスベースの言語と同様のノウハウや実装方法を利用できます。

クラスを定義するには、

class

class Person {
	private name: string;
	constructor(name: string){
		this.name = name;
	}
	introduceOnSelf(): string{
		return "I'm " + this.name + ".";
	}
}
var tom = new Person("Tom");
tom.introduceOnSelf(); // "I'm Tom."

アクセサは

private

public

public

private

コンストラクタは

constructor

先のコードを省略すると次のようにスッキリと記述できます。

class Person {
	constructor(private name: string){}
	introduce(): string{
		return "I am " + this.name + ".";
	}
}

静的なメンバは

static

this

class Some{
	static className = "Some";
}
Some.className;

セッターやゲッターも定義することができます。それぞれ、

set

get

class Some {
	private property: string;
	set Property(value: string) {
		this.property = value;
	}
	get Property(): string {
		return this.property;
	}
}

ただし、セッター・ゲッターを利用するためにはコンパイルターゲットをECMAScript 5に指定する必要があります。本連載で使用しているSublime TextのT3Sプラグインの設定では

ecmascript_target

ES5

もちろん、クラスを継承し、拡張したクラスを宣言することもできます。継承には

extends

class Parent{
	constructor(){}
	method():void;
}
class Child extends Parent{
	constructor(){
		super();
	}
	method():void{
		super.method();
	}
}

オーバーライド時に親のメンバ関数を呼ぶ必要がある場合は、

super

インターフェース

クラスと同様にインターフェースも利用することができます。TypeScriptでは、インターフェースはクラスへメンバの実装を強制する際に使用されることはもちろんのこと、単に型としても利用されます。

インターフェースの定義には

interface

implements

interface ISample{
	property: string;
	method(): void;
}
class SampleClass implements ISample{
	property = "property";
	method(): void{
	}
}

インターフェース

ISample

ISample

JavaScriptでは、多くのパラメータをメソッドに渡す際にオブジェクトにパラメータをまとめる手法をよくとります。TypeScriptでは、このような型の定義にインターフェースが頻繁に利用されます。

次のコードの

func

func

params

params

any

interface

ManyParams

interface ManyParams{
    param1?: string;
    param2?: number;
    param3?: boolean;
    // ...
    paramn?: string;
}

function func(params: ManyParams): void {
    ...
}

func({
    param1: "param1"
    , param3: true
});

jQueryのAjaxを例にとると次のようになり、引数をインターフェースにすることでパラメータのメタ情報を取得できます。

interface JQueryAjaxSettings {
	url?: string;
	data?: any;
	type?: string;
	// ... more properties;
}
/**
 * jQueryのajaxメソッドはJQueryAjaxSettings型の引数をとる。
 */
$.ajax({
	url: "/api/values"
	, type: "get"
})

TypeScriptでは第1回で紹介したとおり、構造的部分型を採用しているため、インターフェース

JQueryAjaxSettings

また、TypeScriptのインターフェースでは、関数の型も定義することができ、TypeScriptで使用する型全般にユニークな呼称を定義できるものと言えます。

interface Listener{
	(ev: Event):void;
}
var l: Listener = function (ev: Event){
}

ジェネリック型

クラスやインターフェースの力を十分に発揮するには、ジェネリック型（総称型）が必要不可欠です。

TypeScriptは静的型付け言語であり、その恩恵を十分に受けるには、極力Any型の利用を避ける必要があります。すると、あらゆる型に対応したクラスとインターフェースを用意するには、おのずとジェネリック型という仕組みを利用する必要があります。

ジェネリック型を利用することで、データ型に依存することなく、構造や振る舞いを記述することができるようになります。

ジェネリック型を利用する際は、

<>

次のコードは、ジェネリック型を利用したスタックのコードです。スタックは

push

pop

IStack

T

string

IStack

T

string

push

T

string

interface IStack<T> {
	push(item: T): void;
	pop(): T;
}
var stack: IStack<string> = [];
stack.push("stack"); // ok
stack.push(0); // error

また、ジェネリック型にはごく簡単な上限制約を設けることができます。制約に合致しない場合はコンパイルエラーとなります。

interface IComparable {
    compareTo<T extends IComparable>(item: T): number;
}
function min<T extends IComparable>(a: T, b: T): T {
    return a.compareTo(b) < 0 ? a : b;
}

a.compareTo(b)

先ほど、ごく簡単な上限制約と紹介したのは、次の

<T extends IComparable>

T

interface IComparable<T>{
	compareTo(item: T): number;
}
// エラー: Tが上限型のジェネリックに指定されている
function min<T extends IComparable<T>>(a:T, b:T): T{
	return a.compareTo(b) < 0 ? a : b;
}

実際は、TypeScriptは制限的部分型であるため、上限制約を定義せずとも、先のようなロジックは利用できるためあまり使用されることはなく、むしろ、制約を設けるよりも制限的部分型を大いに利用するような仕様であるといえます。

内部モジュール

TypeScriptには内部モジュールと外部モジュールの2つのモジュール機能があり、プログラムを機能ごとに切り分けることができます。 内部モジュールはこれを利用することで、名前空間を分けることができます。名前空間を分けることでより構造化してアプリケーションを構築できるようになります。 モジュールを利用するには

module

export

module M{
	class Private{}
	export class Public{}
}
new M.Public(); // ok
new M.Private(); // error

モジュールはネストすることができます。このとき、ネストされたモジュールを参照可能にするには、やはり

export

module M{
	export module N{
		export class O{}
	}
}
new M.N.O();

先のネストされたモジュールは、次のように

.

module M.N{
	export class O{}
}
new M.N.O();

また、モジュールは分割して記述することができます。

module M{
	export class A{}
}
module M{
	export class B{}
}
new M.A();
new M.B();

モジュールのネストが深くなると、参照する際に記述量が多くなりますが

import

module Long.NameSpaces{
	export class C{}
}
new Long.NameSpaces.C();
import C = Long.NameSpaces.C;
new C();

まとめ

TypeScriptでは、他のクラスベースの言語とほとんど差異なく、静的なクラスを使用できます。 また、TypeScriptではインターフェースが非常に広範囲で活躍します。プリミティブな型以外のほとんどの型はインターフェースで表現可能です。JavaScriptコードをTypeScriptに置き換える際には、プログラム内で利用する型をインターフェースで整理してみましょう。

次回は、ファイル分割や外部モジュール、jQueryなどのJavaScriptライブラリを、TypeScriptで使用する方法を紹介します。

前回はTypeScriptの魅力を3つほど紹介し、TypeScriptの開発環境を構築しました。今回はTypeScriptの基本文法とTypeScriptの魅力の一つであり、TypeScriptを最も特徴付ける機能である型注釈について紹介します。

関数

型注釈の説明に入る前に、TypeScriptの関数について説明します。

前回強調したとおり、「JavaScriptのコードそのまま解釈でき、既存コードから開発をスタートできる」ということは、TypeScriptの特徴の一つです。なので、シンタックスはJavaScriptのコードと大差ありませんが、より使いやすく拡張されているものもあります。特に関数は様々な拡張がなされています。

具体的には次の4つの機能が利用できます。

• オプショナルパラメータ
• デフォルトパラメータ
• 可変長パラメータ
• ラムダ式

オプショナルパラメータ

JavaScriptでは宣言されているパラメータの数と、実際にコールする際のパラメータの数は違っていても問題はありませんでした。

function func(arg1, arg2){
}
func();  // なくてもok
func(0); // 足りなくてもok
func(0,1,2); // 多くてもok

しかし、TypeScriptは静的型付け言語であり、宣言通りに値を渡さなければコンパイルエラーとなります。

function func(arg1, arg2){
}
func(0,1); // ok
func();    // コンパイルエラー
func(0);   // コンパイルエラー
func(0,1,2); // コンパイルエラー

このため、TypeScriptではJavaScriptと同様にパラメータに値を渡さないことを許容するには、

?

function func(arg1, arg2?){
    if(!!arg2){
    }
}
func(0,1); // ok
func();    // コンパイルエラー
func(0);   // ok
func(0,1,2); // コンパイルエラー

オプショナルパラメータは

?

デフォルトパラメータ

さらに、TypeScriptではECMA-262 6th Editionの仕様の一つであるデフォルトパラメータが利用できるため、関数にデフォルトのパラメータを設けることができます。

function func(arg = "default"){
     return arg;
 }
 func("hello"); // "hello"
 func(); // "default"

デフォルトパラメータは

=

レストパラメータ

JavaScriptでは可変長パラメータを実現するために、

arguments

function func(arg, ...args){
    return args;
}
func(0,1,2,3); // [1,2,3]

レストパラメータは先頭に

...

ラムダ式

最後にラムダ式です。JavaScriptの関数は関数内と外で

this

this

ringPallet

this

self

var Color = {
    code: ["#000", "#FFF", "#F00", "#0F0", "#00F"]
    , ringPallet: function( ){
        var self = this
          , index = 0;
        return function( ){
            var color = self.code[index];
            index = (index + 1) % self.code.length;
            return color;
        }
    }
 }
 var nextColor= Color.ringPallet();
 nextColor(); // "#000"
 nextColor(); // "#FFF"

しかし、TypeScriptではラムダ式を使用することで

this

var Color = {
    code: ["#000", "#FFF", "#F00", "#0F0", "#00F"]
    , ringPallet: function( ){
        var index = 0;
        return ( ) => {
            var color = this.code[index];
            index = (index + 1) % this.code.length;
            return color;
        }
    }
}

ラムダ式は次のように

=>

(arg) => {
    return this;
}

このとき、変換されたJavaScriptは次のようになります。

var _this = this;
function(arg){
    return _this;
}

this

_this

this

このラムダを使用することで

this

forEach

sort

型注釈

冒頭で述べたとおり、型注釈はTypeScriptを特徴づける重要な機能の一つです。

型注釈にて静的型付を行うことで、コンパイラが整合性をチェックし、適合しているかどうかを検査してくれます。

TypeScriptで型注釈を行う場合、次のようにJavaScriptでの変数宣言の後にコロンで区切りその変数の型を指定します。

var value: string;

このように型注釈をすることで、

value

var value;
value = "value";
value = 0;

しかし、この

value

var value: string;
value = "value";
value = 0; // コンパイルエラー

型注釈をすることで、変数に特定の型を持つ値以外が代入できないように、制限することができます。制限を設けることで、存在しないメンバ関数にアクセスしてしまうミスなどを、事前に防ぐことができます。また、静的に検査されるため、型注釈が実行時のパフォーマンスを直接下げることはありません。

TypeScriptには次の基本型があります。型注釈にはこの基本型に加え、関数とオブジェクト、クラス、インターフェースが使用できます。

• number
• string
• boolean
• Array
• Enum
• void
• any

number/string/boolean

number

string

boolean

number

string

boolean

var num: number = 0;
var str: string = "Hello," + ' World!';
var flag: boolean = false;

Array

Array

[]

Array

var nums: number[] = [0, 1, 2, 3, 4];
var strs: Array = ["foo", "bar"];

Array

Enum

TypeScriptではEnumが導入され、これも型として扱うことができます。

enum Color {Red, Green, Blue};  // Red=0, Green=1, Blue=2
var color: Color = Color.Green; // 1
var colorName: string = Color[color]; // "Green"

Enumの値は0から連続する整数値です。また、その値で参照することで文字列を取得することができます。
多くの言語のEnumと同様に値を自分で決めることもできます。

enum Color {Red=1, Green=5, Blue};// Red=1, Green=5, Blue=6

値を決める際は代入文を使用します。代入文がない場合は、前の要素の次の値になります。

any

any

any

any

var anyVal: any;
anyVal = 0;        // ok
anyVal = "string"; // ok
var num: number = anyVal; // ok

anyVal

any

num

number

any

any

なお、TypeScriptで明示的にキャストするには

<>

var num: number = anyVal;

関数とvoid

関数の型を指定することができます。関数の型は、パラメータの型と戻り値の型をしていすることで表記します。

var func: (arg: string) => void;
func = function(arg: string): void{
    console.log(arg);
}
func = (arg: string):void => {
    console.log(arg);
}

このように

(パラメータ名： パラメータの型) => 戻り値の型

void

function(パラメータ名： パラメータの型): 戻り値の型

(パラメータ名： パラメータの型):戻り値の型

デフォルトパラメータは、オプショナルパラメータとしてあらわされます。よって次のコードの

defaultFunc

optionalFunc

(arg?: string) => void

function defaultFunc(arg: string = "default") {}
function optionalFunc(arg?: string){}
var func: (arg?: string) => void;
func = defaultFunc;  // ok
func = defaultFunc;  // ok

オブジェクト

オブジェクトも型付けをすることができます。オブジェクトに型付けをすることで、そのオブジェクトにどんなプロパティがあるべきかを定義することができます。

次にコードでは、変数

obj

message

string

var obj: { message: string; say: ()=>;void};
obj = {
    message: "Hello"
    , say: function( ){
        console.log(this.message);
    }
    , more: "more"
}

このように、オブジェクトの型付けを利用することで、存在しないプロパティを参照するミスを事前にチェックすることができます。

型推論

型注釈は制約を設け、コンパイラによるチェックを容易にしますが、すべてに注釈すると冗長に見えます。 TypeScriptは他の静的言語と同様に、ある程度型を推論して自動的に型付けをしてくれる型推論があります。

例えば次のコードでは、

str

var str = "Hello";
    str = 0; // エラー

関数もある程度推論されます。 次のコードでは、

str

number

toString

string

s

string

function str(num: number){
    return num.toString();
}
var s = str(100);
s = 0;  // エラー

このコードで注釈をしているのは

str

num

any

str

any

s

any

便利な型推論ですが、注釈を外し過ぎるとすべてが

any

--noImplicitAny

any

前回、Sublime Text 3上での開発環境を構築しました。この環境で

--noImplicitAny

{
    "local_tss":true,
    "error_on_save_only":false,
    "build_parameters":{
        "pre_processing_commands":[],
        "post_processing_commands":[],
        "output_dir_path":"none",
        "concatenate_and_emit_output_file_path":"none",
        "source_files_root_path":"none",
        "map_files_root_path":"none",
        "module_kind":"none",
        "allow_bool_synonym":false,
        "allow_import_module_synonym":false,
        "generate_declaration":false,
        
        //この"no_implicit_any_warning"をtrueにする
        "no_implicit_any_warning":true,
                    
        "skip_resolution_and_preprocessing":false,
        "remove_comments_from_output":false,
        "generate_source_map":false,
        "ecmascript_target":"ES5"
    }
}

build_parameters.no_implicit_any_warning

true

--noImplicitAny

オーバーロード

JavaScriptは多様性を積極的に活用する言語の一つです。とくにjQueryなどのライブラリでは多くの多様性を持ったメンバー関数が実装されています。
もちろん、TypeScriptでも同様に実装することで多様性は実現できますが、そのままでは

any

次のコードでは

render

function render(html: string, parent?: HTMLElement);
function render(elem: HTMLElement, parent?: HTMLElement);
function render(arg: any, parent: HTMLElement = document.body){
    if(typeof arg === "string"){
    var elem = document.createElement("div");
        elem.innerHTML = arg;
        while (elem.childNodes.length) {
            parent.appendChild(elem.firstChild);
        }
    }
    else{
        parent.appendChild(arg);
    }
}
render("
Hello, World!
");
render(document.createElement("div"));
render(0); // コンパイルエラー

この

render

(html: string, parent?: HTMLElement)=>void

(elem: HTMLElement, parent?: HTMLElement)=>void

render(0)

まとめ

今回は型注釈を中心に、変数や関数での注釈方法や、関数のオーバーロードなどを紹介しました。また、前回構築した開発環境で

--noImplicitAny

型注釈をしっかり施すことによって、型の不一致から発生するバグを実行前に検知し、修正することができます。 これが、TypeScriptの大きな魅力の一つです。 ぜひ、コンパイルオプションを変更して

any

次回はクラスやインターフェース、総称型を紹介します。

Webページで補助的に使用する用途で開発されたJavaScriptも、今ではWebになくてはならない重要な技術の一つです。特にSingle-page ApplicationなどのモダンなWebアプリケーションではそのコード量も多くなります。JavaScriptの負担する領域が日々大きくなる中、様々なフレームワークやライブラリが日夜生まれ続けており、また、JavaScript自体を代替する言語、altJSが注目を集めています。

altJSの一つであるTypeScriptが4月2日にめでたくTypeScript 1.0となりリリースされました。今回は、このTypeScriptの特徴を絞って紹介し、実際にTypeScriptで開発できる環境を構築します。

TypeScriptとは?

TypeScriptはMicrosoft主導のもとオープンソースとして開発されており、CoffeeScriptやHaxe等と同じく、JavaScriptにコンパイルし、JavaScriptエンジン上で動作します。

Dartのように独自のVMはありませんが、開発環境が充実しており、入力補完が行えたり、ソースマップの利用でTypeScriptのコード上でのデバッグが可能です。

TypeScriptの特徴を3行でまとめると、

• JavaScriptのコードそのまま解釈でき、既存コードから開発をスタートできる。
• また、クラスやインターフェース、モジュール化などでコンポーネント化がより容易になる。
• かつ、型検査やインテリセンス、リッチデバッグ環境で大規模開発を助けてくれる。

と、そんな言語です。

TypeScriptの基本的な文法仕様はJavaScriptと変わりません。なので、既存のJavaScriptのコードをそのままコピー＆ペーストしても差異なく動き、既存のコードを徐々にTypeScriptの機能で記述していくような開発スタイルが取れます。

ここがTypeScriptのチャームポイント！

私が注目しているTypeScriptの特徴は次の３つです。

• 次世代JavaScriptの仕様
• 静的な型付けと構造的部分型
• デバッグへの配慮

TypeScriptにはClassなどの次世代JavaScript：ECMA-262 6th Editionで追加される最新機能にできるだけ近くした機能が提供されています。つまり次世代標準を先取りして利用しているので、将来ECMAScript6が標準化された際に自然に移行でき、また、今後、TypeScriptとJavaScriptの差異は小さくなっていくと考えられます。

次に、TypeScriptの名前にもある通り、型は欠かすことができない仕様です。静的な型付けと構造的部分型のおかげで、TypeScriptは名実ともに静的な型付け言語を好む開発者のためのaltJSであるといえます。

最後に、TypeScriptはデバッグ環境の充実に力を入れている言語です。ソースマップを出力できるので、ブラウザでのデバッグの際にTypeScriptコード上でデバッグすることができます。

ClassやModuleが使える

次世代JavaScriptで導入される仕様にClassとModuleがあります。TypeScriptではこれらの機能を先取りして導入しています。

Classは名のとおり、クラスを定義するための仕様です。「原稿の仕様：ECMA-262 5.1th Edition」でもclassやextendsなどのキーワードが予約語になっています。次世代JavaScriptではこれらの機能が利用できるようになる予定で、様々なaltJSで仕様に若干のブレがあったクラス定義が一律のものになります。

クラスの定義は多くのオブジェクト指向言語と大差はありません。

class Person {
    name
    static kind = "Homo sapiens";
    constructor(name) {
        this.name = name;
    }
    walk(distance) {
        console.log(this.name + " walk " + distance + "meter.");
    }
    private think() {
        console.log(this.name + " is thinking...");
    }
}

このようにクラスを定義すると次のようなJavaScriptのコードが生成されます。

var Person = (function () {
    function Person(name) {
        this.name = name;
    }
    Person.prototype.walk = function (distance) {
        console.log(this.name + " walk " + distance + "meter.");
    };
    Person.prototype.think = function () {
        console.log(this.name + " is thinking...");
    };
    Person.kind = "Homo sapiens";
    return Person;
})();

標準的なJavaScriptでのクラスの実装です。また、出力されるJavaScriptコードではECMA-262 3rd、または5thで実行可能なコードを生成することができるので旧ブラウザ対応にも問題ありません。次世代JavaScriptの仕様と異なる部分はprivateとpublicの2つの識別子が挙げられます。このほかにもTypeScriptではインターフェイスの実装など独自に拡張している箇所がいくつか存在します。

Classと同様に導入されている新機能にModuleがあります。TypeScriptではモジュール、または、内部モジュールと呼ばれます。このモジュールを利用することで名前空間を実現でき、適切なカプセル化が施せるようになります。

モジュールはmoduleキーワードを用いて次のように定義します。

module M {
    class A { }
    export class B { }
}
new M.A(); // エラー
new M.B();

モジュール内に定義されたクラスや変数、関数などが利用できるのはそのモジュール内のみとなります。モジュールの外で利用したい場合はexportキーワードを先頭におきます。

現在はクラスやモジュール、アロー関数などの次世代JavaScriptの仕様の導入が進んでいます。これらの機能は可能な限り、ECMA-262 3rdのコードを生成できるようになっているので次世代JavaScriptの仕様をいち早く試して、なおかつ、未対応のブラウザもカバーできるようなaltJSになりつつあります。これはとても魅力的なことではないでしょうか？

静的型付けと構造的部分型

TypeScriptの大きな特徴の一つとして、静的型付け言語であるということがあげられます。その名称にもなるくらいに重要視しており、次世代JavaScriptの機能以上にこだわりが感じられます。

つまり、TypeScriptはコンパイラによる型検査を好む開発者のための言語だといえます。Java、C#、Scalaなどの静的型付け言語を利用している、あるいは、静的型付け言語にメリットを感じる開発者がターゲットなのです。

TypeScriptでは、number、string、boolean、Array、Enum、anyに関数の戻り値がundefinedであることを示すvoidを含めた7つの基本型があります。

TypeScriptでの型注釈は次のように変数名の後にコロンで区切って行います。

var hoge:string;

varを先頭に書かなければならないので冗長に感じますが、JavaScriptのコードと共存させるためにこのような仕様になっています。

型注釈によって指定された型以外の型の値を代入するとエラーになります。

var hoge:string = "hoge";
hoge = 0; // エラー

型注釈でanyを指定するとJavaScriptと同様に全ての型を許容します。型を注釈しない場合はany型であると判断されます。

動的型付けと静的型付けのメリットの論点にサブタイピングがあります。サブタイピングには公称的部分型（nominal subtyping）、構造的部分型（structural subtyping）、ダックタイピング（duck typing）の3種類があります。そして、動的言語ではもっぱらダックタイピングが採用されており、JavaScriptもこのダックタイピングです。ダックタイピングとは、オブジェクトが期待通りの役割を果たせるなら、それが何であろうとかまわない手法です。

例えば、次のJavaScriptコードは期待通りに動きます。

var a = {
    method: function () { }
}
var b = {
    method: function () { }
}
function exec (obj) {
    obj.method();
}
exec(a);
exec(b);

aもbもメンバにmethodがあるので、exec内のmethodのコールでエラーになることはありません。aとbの間には何の取り決めも約束事もありませんが、両方とも実行時にmethodを持っているのでexec関数は気にしないのです。

しかし、これは静的言語ユーザの視点からするとなんとも落ち着かない状態です。何とか、execに条件付けをして制約を設けたいところです。そこで、利用できるのが、公称的部分型と構造的部分型です。

公称的部分型は古くから静的言語で利用されているインターフェイスを用いる方法です。もちろん、TypeScriptでも利用できます。

interface I {
    method():void;
}
var a: I = {
    method: function () { }
}
var b: I = {
    method: function () { }
}
function exec (obj: I) {
    obj.method();
}
exec(a);
exec(b);

メンバにmethodの実装を義務付けるインターフェイスIをつくり、objおよびa、bに型注釈をすることで、methodが確実に存在するように制約を設けることができました。

しかしこれでは、JavaScript本来のダックタイピングによる柔軟性が失われてしまったように感じます。

そこでTypeScriptは、Scalaなど比較的新しい言語ではおなじみの構造的部分型という手法を採用しています。これは代替する構造があればそれでよしとする手法です。

例えば先のコードのbの型をanyに変えたものも正しいコードで、コンパイルエラーになりません。

interface I {
    method():void;
}
var a: I = {
    method: function () { }
}
var b: any = {
    method: function () { }
}
function exec (obj: I) {
    obj.method();
}
exec(a);
exec(b);

これは、bもIと同様の構造を持っていることをコンパイラが確認できるため、エラーとみなしません。しかし、bのmethodの定義を削除するとエラーになります。

このように、TypeScriptはコンパイラによる型検査を導入しつつ、構造的部分型を採用し、JavaScript本来の持ち味をできるだけ生かすような言語仕様になっています。いかがでしょう、思わず「いいね！」を押したくなりませんか？

ソースマップでそのままデバッグ！

TypeScriptもHaxeなどのaltJSと同様に、実行コードとデバッグ対象のコードを紐づけるソースマップを出力できるため、TypeScriptコード上でデバッグすることができます。また、開発環境も充実しおり、インテリセンスや入力補完の恩恵を受けることができます。

ソースマップは--sourcemapオプションを付けることで出力することができます。

$ tsc --sourcemap app.ts

ソースマップはModern IEやChromeなどの主要なブラウザで利用することができますが、利用にあたって設定する箇所があります。

Modern IEであれば、開発者ツールの「デバッガー」タブを開き対象のファイルを読み込みます。この時、tsファイルが読み込まれていればそのままTypeScriptでデバッグできます。もし、jsファイルが読み込まれている場合は図の赤枠で示す「ソースマップのロード」をオンにします。

Modern IEでのソースマップの利用

Chromeの場合はDeveloper Toolsの「Settings」を開き、図の赤枠で示す「Enable JavaScript source maps」をオンにします。

Chromeでのソースマップの利用

これで、TypeScriptコード上でブレイクポイントを置いたり、値をウォッチしたりとリッチなデバッグをすることができます。

TypeScriptコード上でのブレイクポイント

TypeScript開発環境の構築

最後に、入力補完やシンタックスハイライトがあり、TypeScriptでの開発がとてもはかどる環境を整えます。

開発環境の選択肢は次の3つがあります。

• Visual Studio 2013 / 2012
• IntelliJ IDEA / WebStorm
• Sublime Text 3

ここでは、OSを問わず利用でき、さらにWeb開発での利用者も多いSublime Textで構築します。

事前準備

Node.jsとnpm、Sublime Text 3をインストールしておいて下さい。

1. TypeScriptのインストール

TypeScriptと周辺ツールをインストールします。

npm install -g typescript typescript-tools

2. T3Sのインストール

T3SはSublime Text 3のプラグインで、TypeScriptの入力補完・エラーチェックなどができます。

Sublime Textを開きツールバーから「Preferences」の「Browse Packages…」を選択します。開いたフォルダをターミナルで開きます。Windowsなら、Shift+右クリックで現れるコンテキストメニューから「コマンドウィンドウをここで開く」を選択のがおすすめです。

ここで、githubからパッケージをクローンします。

$ git clone https://github.com/Railk/T3S.git

3. SublimeOnSaveBuildのインストール

2.に続けてSublimeOnSaveBuildもクローンします。SublimeOnSaveBuildはaltJSやCSSプリプロセッサなどを保存と同時にコンパイルするプラグインです。

$ git clone https://github.com/alexnj/SublimeOnSaveBuild.git

4. 設定

最後に設定を行います。まず、Sublime Textを再起動します。再起動後、SublimeOnSaveBuildプラグインを設定してファイルを保存した際に自動でビルドするように設定します。

「Preferences」\>「Package Settings」\>「SublimeOnSaveBuild」\>「Settings-User」を開き、次の設定をコピーします。

{
    "filename_filter": "\\.(ts|css|js|sass|less|scss)$",
    "build_on_save": 1
}

次にT3Sプラグインを設定して、ソースマップをビルドするようにします。

「Preferences」\>「Package Settings」\>「T3S」内の「Settings-Default」の設定を同階層の「Settings-User」にコピーします。コピーした設定のgenerate_source_mapの項目をfalseからtrueに変更します。

{
    "local_tss":true,
    "error_on_save_only":false,
     "build_parameters":{
     "pre_processing_commands":[],
     "post_processing_commands":[],
     "output_dir_path":"none",
     "concatenate_and_emit_output_file_path":"none",
     "source_files_root_path":"none",
     "map_files_root_path":"none",
     "module_kind":"none",
     "allow_bool_synonym":false,
     "allow_import_module_synonym":false,
     "generate_declaration":false,
     "no_implicit_any_warning":false,
     "skip_resolution_and_preprocessing":false,
     "remove_comments_from_output":false,
     "generate_source_map":true,
     "ecmascript_target":"ES3"
     }
 }

5. 確認

以上で、環境構築は終了です。tsファイルを作成して確認してみます。

app.tsを作成して簡単なクラス：Aを作成してみます。Aはインスタンス変数を1つとインスタンス関数を2つ持っています。このAのインスタンスaを作成し、.を打つと下図のように入力補完が現れます。

入力補完

さらに、エラーが発生した際には下図のようにエラーの発生した箇所がハイライトされます。

エラー箇所のハイライト

ファイルを保存すると自動でコンパイルされます。 デフォルトのビルド設定を使っているので、jsファイルとmapファイルはソースコードと同じ階層に出力されます。

出力ファイル

まとめ

今回はTypeScriptの魅力を3点に絞って大まかに紹介しました。また、Windows・Mac・Linuxで利用できる充実した開発環境も整えました。

ソースマップも出力されて、開発環境もここまで整っているなら、利用してもいいかなという気持ちになっていただけたでしょうか？今までのJavaScriptコードもそのまま動くので、まずは、ただコピーして要所要所に型注釈をいれることから初めて見て下さい。

次回からは、TypeScriptの記法を詳しく紹介していきますので、お楽しみに！