AngularJS+TypeScript - AngularJS 1周年記念勉強会

AngularJS❤TypeScript
わかめまさひろ
Wednesday, July 3, 13

わかめまさひろ
GAE
Android
TypeScript
AngularJS
@vvakame

• Google App Engine
• Android
• Google Apps
などなど、
技術に特化した会社です。

TypeScriptについて

JavaScriptなんてクソだ！
• JavaScriptは確かに良い言語だよ
• しかし腐ってる部分もたいへん多い
• packageとかnamespaceとかない
• 綺麗なコード書ける＝上級者
• prototypeのOOP？？ナニソレ
• 型( ﾟ!ﾟ)ｸﾚ動的型付とかやだよ！
• なのにブラウザ上で動くのはJSだけ

TypeScriptは神
• 可読性の高いJavaScriptに変換して実行する
• ECMAScript6を意識
• 言語仕様的にはJSのSuperSet(上位セット)！
• moduleある！classもある！継承もある！
• 型もあるよ！
• 既存の資産も捨てなくて済むよ！

TypeScript以外の選択肢
静的な型検査
JS変換後の可読性
TypeScript
CoffeeScript
Dart
Haxe
JSX
最適化されたJSを吐く…的
評価軸は入ってない事に注意

TypeScript基本文法

var hoge = "hoge";
hoge.arimasen();
hoge = "fuga";
hoge = 1;
var fuga:any = "fuga";
fuga = 1;
変数について
• 型指定が出来る
• 右辺から自動的に推論される
• メソッドなどの存在チェックがされる
stringにarimasenメソッドはない
stringにnumberは入れられない
anyはなんでも！なるべく使わない
TS

クラスについて
• TypeScriptはクラスベースなOOP！
class Test {
str:string;
constructor() {
this.str = "new";
}
showMessage():void {
alert(this.str);
}
}
new Test().showMessage();
var Test = (function () {
function Test() {
this.str = "new";
}
Test.prototype.showMessage = function () {
alert(this.str);
};
return Test;
})();
new Test().showMessage();
TS
http://goo.gl/G7t0U
JS

module Sample {
export class Test {
static text = "Hello world";
}
class Internal {
}
}
alert(Sample.Test.text);
var Sample;
(function (Sample) {
var Test = (function () {
function Test() { }
Test.text = "Hello world";
return Test;
})();
Sample.Test = Test;
var Internal = (function () {
function Internal() { }
return Internal;
})();
})(Sample || (Sample = {}));
alert(Sample.Test.text);
モジュールについて
• C# のnamespace
• Java のpackage
• ネストも可能
TS
http://goo.gl/R7IK8
JS

構造的部分型
interface Settings {
method:string;
url:string;
cache?:bool;
}
var doAjax = (settings:Settings) => {
// あれやこれや
};
var settings:Settings = {
method: "POST",
url: "http://topgate.co.jp/"
};
doAjax(settings);
TS
•interface = 満たすべき仕様
• 仕様があってりゃえじゃないか
•既存のJavaScriptコードとの互換性
http://goo.gl/oAArp

class A {
constructor(public str:string, public num:number){}
}
class B {
constructor(private a:A, public bool:bool){}
get str() { return this.a.str; }
get num() { return this.a.num; }
}
var b = new B(new A("vvakame", 29), true);
alert(b.str + " " + b.num + " " + b.bool);
getter, setter
• get, set アクセサが定義できる
• サーバから貰った複数のデータを合成したり
するのに思いのほか便利
TS
http://goo.gl/V5pNv

Generics
class ProcessedHttpPromiseImpl<T> {
constructor(
public promise:ng.IHttpPromise,
public preProcess:(data:any)=>T) {
}
success(callback:(data:T)=>void):ProcessedHttpPromise {
this.promise.success((original:any)=> {
var data:T = this.preProcess(original);
callback(data);
});
return this;
}
error(callback:HttpPromiseCallback):ProcessedHttpPromise {
this.promise.error(callback);
return this;
}
}
var promise: ProcessedHttpPromiseImpl<Sample> = ...;
promise.success((data) => {
// data は Sample としてしっかり型チェックされる
// Genericsがなかったらここは any で扱うしかない…！
data.test();
});
TS

TypeScript周辺環境

既存資産の活用
• 型指定ファイルを作成
• .d.ts という拡張子
• http://goo.gl/jrvH5
• 普通のtsコンパイルで.d.tsの出力も可能
• サンプルが簡単に得られる！

既存資産の活用
• AngularJS の場合
• angular.d.ts を利用 http://goo.gl/9NrZ4
interface IHttpService {
// At least method and url must be provided...
(config: IRequestConfig): IHttpPromise;
get (url: string, RequestConfig?: any): IHttpPromise;
delete (url: string, RequestConfig?: any): IHttpPromise;
head(url: string, RequestConfig?: any): IHttpPromise;
jsonp(url: string, RequestConfig?: any): IHttpPromise;
post(url: string, data: any, RequestConfig?: any): IHttpPromise;
put(url: string, data: any, RequestConfig?: any): IHttpPromise;
defaults: IRequestConfig;
// For debugging, BUT it is documented as public, so...
pendingRequests: any[];
}

開発環境
• VisualStudio
• 王道
• WebStorm
• JetBrains社最近AndroidStudio出した
• 現在 0.9 対応進行中！
• goo.gl/2QAgV
• Macユーザにオススメ

with AngularJS

サーバと接続
• サーバから来るJSONもちゃんと型付する
• できればクラスがいいと思う
• $http周りはwrapしてGenerics使う

プログラムの構成
• Model, Service, Controllerはmoduleに分ける
• 今の所 Model, Service, Controller で
moduleは全部別
• ある程度の単位毎にさらにmoduleを切る
• ControllerとかServiceとか

Controllerについて 1
• controllerはしっかりangular.moduleで登録
• 一覧性が高くなる & IDEで定義ジャンプ
• Controllerはclassにする
• プロパティ持ちたいので

Controllerについて 2
• Controller 1つにつき 1 module
• 同じmoduleに$scope用interfaceを定義
• HTMLから使うメソッドは…
• $scopeに直接関数を…
• 一旦controllerにメソッド定義し$scopeに…
• 代入作業が案外手間 (thisが！thisが！)

テストについて
• テストが少し手間…
• JSの手順そのままだと上手くいかないことが
• .d.ts が貧弱なせい…？
• JSで解説してるサイトがundocumentedな関
数使ってるのがわりーんだよチキショウ！
• 一回テンプレが出来れば後は使い回しで

TypeScript利用事例

TOPGATE社内利用例
+
on
GAE/Java

TOPGATE社内利用例
• 現在1案件で利用中 (完了
• 工数3人月くらい (プログラマ2名
• AngularJS + TypeScript | GAE/J
• サーバ側UnitTestでクライアント側UnitTest用
のテストデータを生成
• CIサーバではPhantomsJSを活用

ヤバい！
• サーバとのデータ受け渡し部分
• AngularJSのHTMLへの記述部分
• デバッグ少し大変
• マイナーライブラリの .d.ts は自作…

スゴい！
• 設計変更やメソッドの変更に強い！
• 複数人開発でも安心して開発できる
• ロジックの実装に集中できる

総括
TOPGATE社はTypeScriptを続けるよ！

今後の課題

なんとかしたい
• AngularJSのHTML部分の静的なチェック
• リファクタリング漏れが怖い…
• DIの静的なチェック
• scopeをscpoeにtypo→実行時エラー！
誰か作ってくれーーっ…！！

参考
• G+ TypeScript
• http://goo.gl/RINqk
• わかめはてブ
• http://goo.gl/pUdoD
• TypeScript クイックガイド
• http://phyzkit.net/typescript/

参考
• Playground
• http://goo.gl/dix4F
• Spec
• http://goo.gl/0PjYT
• DeﬁnitelyTyped
• http://goo.gl/jrvH5

ご清聴ありがとうございました。
教育案件や技術コンサル
もやってます。

AngularJS+TypeScript - AngularJS 1周年記念勉強会

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to AngularJS+TypeScript - AngularJS 1周年記念勉強会 (20)

More from Masahiro Wakame (20)

Recently uploaded (9)

AngularJS+TypeScript - AngularJS 1周年記念勉強会