2017/6 TypeScriptを使ってみた

佐々木誠

2017年6月13日に公開大阪

紹介

• TypeScriptとはMicrosoft製のプログラミング言語
• Javaっぽい型やクラスのあるJavaScriptのようなもの
• TypeScriptでコーディングし、ビルドしてJavaScript(ES5)を生成し活用する
• Angular2はTypeScriptで開発されてたり、googleの標準言語と採用されたりと最近活気がある

サンプルコード

こんな雰囲気でコード書けます。

// View基底クラス
export class Base {

	protected view:JQuery;
	protected util:Util;
	protected store:Store;

	constructor(util:Util, store:Store){

		this.util = util;
		this.store = store;
	}

	public get View():JQuery{
		return this.view;
	}

	// 受信
	public on(type: string, listener: (data: Object) => void):Notify{
		return this.notify.on(type, listener);
	}

	// 受信解除
	public off(type: string, listener: (data: Object) => void): Notify{
		return this.notify.off(type, listener);
	}

	// 送信
	protected emit(type: string, data?: Object):void{
		return this.notify.emit(type, data);
	}
}

良かったところ

• TypeScriptに対応したエディタを使うと型サジェストしてくれる
• データ構造や関数変更した場合に影響がわかりやすい(ビルドエラーやエディタ上でエラーになる)
• 型のある言語を触ったことがない人には、クラス設計入門としてJavaより手軽かもしれない

いまいちだったところ

• デザイン変更でバンバン変わるUIに利用したせいか、型があると確かに堅牢だが型定義(コーディング)する手間があるのでフットワークが落ちる(慣れかも)
• 手間がかかる割に型の恩恵(安全性)に預かれないので微妙(好み)

備考

• TypeScript2.1
• エディタ：Visual Studio Code
• ビルドツール：webpack2.6