Recommended AngularJS+TypeScript - AngularJS 1周年記念勉強会
JavaScriptユーティリティライブラリの紹介
JavaのテストGroovyでいいのではないかという話
第4回勉強会 Groovyの文法からＳｐｏｃｋまで
C++でCプリプロセッサを作ったり速くしたりしたお話
Clean Architectureで設計してRxJSを使った話
Java開発の強力な相棒として今すぐ使えるGroovy
Kink: プロトタイプベースの俺々 JVM 言語
JJUG CCC 2013 Fall「JVMコードリーディング入門-JVMのOS抽象化レイヤーについて-」
Hello, C++ + JavaScript World! - Boost.勉強会 #11 東京
Chunked encoding を使った高速化の考察
Visual Studioで始めるTypeScript開発入門
More Related Content AngularJS+TypeScript - AngularJS 1周年記念勉強会
JavaScriptユーティリティライブラリの紹介
JavaのテストGroovyでいいのではないかという話
What's hot (20) 第4回勉強会 Groovyの文法からＳｐｏｃｋまで
C++でCプリプロセッサを作ったり速くしたりしたお話
Clean Architectureで設計してRxJSを使った話
Java開発の強力な相棒として今すぐ使えるGroovy
Kink: プロトタイプベースの俺々 JVM 言語
JJUG CCC 2013 Fall「JVMコードリーディング入門-JVMのOS抽象化レイヤーについて-」
Hello, C++ + JavaScript World! - Boost.勉強会 #11 東京
Chunked encoding を使った高速化の考察
Viewers also liked (20) Visual Studioで始めるTypeScript開発入門
.NET Web プログラミングにおける非同期 IO のすべて (Build Insider OFFLINE)
50分で掴み取る ASP.NET Web API パターン＆テクニック
Build Insider OFFLINE vol.01 スマートフォンサイトのこれから ～ レスポンシブ・Webデザインは救世主となり得るか
20140823 LL diver Angular.js で構築した note に関して
[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦！
Introduction of "MarkdownPresenter"
TypeScript ファースト ステップ (v.0.9 対応版) ～ Any browser. Any host. Any OS. Open Sourc...
イラスト日用服飾辞典／三面記事の歴史／健康男 を読んで
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
CLR/H#74 LT IT勉強会発表用イチオシツール
Similar to Buildinsider OFFLINE TypeScriptの基礎から実践・利用事例まで (20) TypeScript と Visual Studio Code
TypeScript ファーストステップ (Rev.2) ～ Any browser. Any host. Any OS. Open Source. ～
Visual Studio 2012 Web 開発 ～ One ASP.NET から TypeScript まで ～
TypeScript ファーストステップ ～ Any browser. Any host. Any OS. Open Source. ～
ng-japan 2015 TypeScript+AngularJS 1.3
"今" 押さえておきたい！ Web アプリ開発の技術トレンドとツールの進化
Angular ユーザーなら押さえておきたい！ TypeScript と Visual Studio Code の基礎と活用
DEV-011_TypeScript ～Any browser. Any host. Any OS. Open Source～
ECMAScript 6 Features（PDF 版）
TypeScript & 関数型講座 第2回 TypeScript という言語
JavaScript使いのためのTypeScript実践入門
More from Masahiro Wakame (20) GoCon2016 spring 自作Webフレームワーク uconを作った話
GoCon 2015 Summer GoのASTをいじくって新しいツールを作る
TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部
Google Glassでできること XE12版 最新開発情報 Mirror API & GDK
20ヶ月を取り戻す Dart flight school
Google Glassでできること XE11版 最新開発情報 Mirror API & GDK
CEATEC Glassware(Google Glassアプリ)開発の指南と開発事例
ReVIEW & CI - ChefでCI環境構築
Firefox OS勉強会 2nd TypeScript+AngularJS
Datastoreへのアクセスを楽してMemcacheアクセスに置き換えるライブラリ作った
3. • Google App Engine
• Android
• Google Apps
などなど、
技術に特化した会社です。
3
5. • Windows!! ! → VMwareに…
• VisualStudio! → 持ってない
• ｺﾞﾒﾝﾅｻｲｯ ○┐
5
11. TypeScript the Great
• JSのSuperSet(上位セット)だよ！
• 全てのJSはTypeScriptである
• 可読性の高い変換後JSコード
• moduleある！classもある！継承もある！
• 型もあるよ！
• 既存の資産も捨てなくて済むよ！
• TypeScriptはロックインもされない！
11
23. var hoge = "hoge";
hoge.arimasen();
hoge = "fuga";
hoge = 1;
var fuga:any = "fuga";
fuga = 1;
変数について
• 型指定の省略も可能
• 右辺から自動的に推論される
• メソッドなどの存在チェックがされる
stringにarimasenメソッドはない
stringにnumberは入れられない
anyはなんでも！なるべく使わない
TS
23
24. クラスについて
• JSはプロトタイプベースのOOP
• 多くのプログラマに馴染みが薄い…
• 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 JS
http://goo.gl/G7t0U
24
25. class Test {
constructor(public str:string = "new"){
}
public showMessage():void {
alert(this.str);
}
}
var test = new Test();
test.str = "Hello";
test.showMessage();
クラスについて
• 省略記法が色々
• コンストラクタの引数をプロパティに
TS
http://goo.gl/7Hi7T
25
26. var func1 = function (str = "World") {
alert("Hello " + str);
}
var func2 = (str = "World") => {
alert("Hello " + str);
}
func1(); // Hello World
func2("にゃんこ"); // Hello にゃんこ
// func1(1);
関数について
• 書き方色々
• 通常のJSスタイル
• アロー関数式
TS
型が合わないのでエラー http://goo.gl/ArVFH
26
27. class Sample {
text = "Meow";
test() {
var func1 = function () {
alert(this.text);
};
var func2 = () => {
alert(this.text);
};
func1(); // undefined
func2(); // Meow
}
}
new Sample().test();
アロースタイルは便利
• 1つ外側の this が利用可能
• 不都合がない限りアロースタイルで
TS
Sample.prototype.test = function () {
var _this = this;
var func1 = function () {
alert(this.text);
};
var func2 = function () {
alert(_this.text);
};
func1();
func2();
};
JS
http://goo.gl/K6MU7
一部略
27
29. 引数について
• 省略可能引数
• デフォルト値付き引数
• 可変長引数
var func1 = (str?:string) => alert(str);
func1();
func1("Hello world");
var func2 = (str = "Hello world") => alert(str);
func2();
func2("Hello world");
var func3 = (...strs:string[]) => alert(strs.join(" "));
func3();
func3("Hello", "world");
http://goo.gl/Bt83S
29
30. 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
30
31. interface Animal { walk(); }
interface Cat extends Animal { meow(); }
class NorwegianForestCat implements Cat {
walk() {
alert("四足とことこ");
}
meow() {
alert("にゃーん");
}
brushing() {
alert("毛が長いですごしごし");
}
}
var doWalk = (animal:Animal) => animal.walk();
doWalk(new NorwegianForestCat());
インターフェースについて
• C# や Java の interface と同じ
TS
http://goo.gl/RNH8J
31
32. 構造的部分型
• interface = 満たすべき仕様
• 仕様があってりゃえじゃないか
TSinterface MusicPlayer {
play(title:string);
}
var gameMusicPlayer =
(player:MusicPlayer) => {
player.play("Baba yetu");
}
// MusicPlayerを実装している
class Mp3Player implements MusicPlayer {
play(title:string) {
alert(title + "を再生します。");
}
}
gameMusicPlayer(new Mp3Player());
// MusicPlayerが要求するものを全て持っている
class 路上音楽家 {
play(title:string) {
alert(title + "がご希望ですか！");
}
}
gameMusicPlayer(new 路上音楽家());
// 実はクラスじゃなくても仕様を満たせばOK
gameMusicPlayer({
play: (title:string) => {
alert(title + "の再生")
}
});
http://goo.gl/JpjF3
32
34. public, private
• メソッドやプロパティをprivateに
• コンパイル時チェックのみ
• publicもprivateも生成されるJavaScriptに違い
class Sample {
private test1() {}
public test2() {}
}
var sample = new Sample();
sample.test1();
sample.test2();
var Sample = (function () {
function Sample() { }
Sample.prototype.test1 = function () {
};
Sample.prototype.test2 = function () {
};
return Sample;
})();
var sample = new Sample();
sample.test1();
sample.test2();
エラー
TS JS
http://goo.gl/5UTb2
34
35. 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
35
36. cast
• <any> 最強です 稀に使います
• TypeScriptの利点が失われるので極力使用し
ちゃあダメ！
TSclass A {
}
class B {
}
var b1:B = new A();
var b2:B = <B> new A();
var b3:B = <any> new A();
両方エラー
http://goo.gl/12KMc
36
38. interface Message {
new (str:string):{
showMessage();
};
}
var func = (messageClass:Message) => {
new messageClass("Hello").showMessage();
};
class MessageImpl {
constructor(public str:string){}
showMessage() { alert(this.str); }
}
func(MessageImpl);
複雑な型
• new できる関数を表す型
• 以下のプロパティを持つ…
TS
http://goo.gl/0Tp8s
38
39. class Sample {
show(str:string):void;
show(num:number):void;
show(obj:any) {
if (typeof obj === "string") {
alert("string:" + obj);
} else if (typeof obj === "number") {
alert("number:" + obj);
} else {
alert("object:" + obj);
}
}
}
new Sample().show("str");
new Sample().show(1);
// new Sample().show({});
複雑な型
• メソッドのオーバーロード
TS
http://goo.gl/GmJiV
39
41. 既存資産の活用
• 型指定ファイルを作成
• .d.ts という拡張子
• http://goo.gl/jrvH5
• 普通のtsコンパイルで.d.tsの出力も可能
• Roadmapでは0.9.xで集積サイトが…
• →2月くらいに記述が消えた(´・#・`)
41
42. 既存資産の活用
interface IScope {
// Documentation says exp is optional, but actual implementaton counts on it
$apply(exp: string): any;
$apply(exp: (scope: IScope) => any): any;
$broadcast(name: string, ...args: any[]): IAngularEvent;
$destroy(): void;
$digest(): void;
$emit(name: string, ...args: any[]): IAngularEvent;
// Documentation says exp is optional, but actual implementaton counts on it
$eval(expression: string): any;
$eval(expression: (scope: IScope) => any): any;
// Documentation says exp is optional, but actual implementaton counts on it
$evalAsync(expression: string): void;
$evalAsync(expression: (scope: IScope) => any): void;
// Defaults to false by the implementation checking strategy
• AngularJS の場合
• angular.d.ts を利用 http://goo.gl/9NrZ4
42
43. 既存資産の活用
• 構造的部分型が大変良い！
• 整合性があっていればちゃんと使える
• JavaScriptの文化に馴染みやすい
interface Settings {
method:string;
url:string;
}
var doAjax = (settings:Settings) => { ... };
doAjax({
url: "http://topgate.co.jp/"
});
TS
不足があればコンパイルエラーになる
http://goo.gl/mv1To
43
45. サンプルコードを試す
• git clone git://github.com/vvakame/
typescript-project-sample.git
• 上記ディレクトリ直下で
• npm install
• bower install
• tsd install jquery
• grunt test
• grunt && node app.js
45
50. 必要なもののインストール
• npm install -g typescript
• npm install -g grunt-cli tsd bower
• phantomjs http://phantomjs.org/
npm は nodebrew や
chocolatey とかで入れる
50
53. TOPGATE社内利用例
• 現在1案件で利用中 (完了
• 工数3人月くらい (プログラマ2名
• AngularJS + TypeScript | GAE/J
• サーバ側UnitTestでクライアント側UnitTest用
のテストデータを生成
• CIサーバではPhantomsJSを活用
53
59. 0.9の話
• 現行は0.8.3です
• bool 型が boolean になったり
• Genericsが入ったり
• その他色々
• http://goo.gl/d7rYK
• http://goo.gl/IFkxl
59
60. 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
60
61. • .d.ts 用
• 引数に応じて帰ってくるものの型が変わる
Specialized Signatures
interface Document {
createElement(tagName: string): HTMLElement;
createElement(tagName: "div"): HTMLDivElement;
createElement(tagName: "span"): HTMLSpanElement;
createElement(tagName: "canvas"): HTMLCanvasElement;
}
61
63. 参考
• G+ TypeScript
• http://goo.gl/RINqk
• わかめはてブ
• http://goo.gl/pUdoD
• TypeScript クイックガイド
• http://phyzkit.net/typescript/
63
![TypeScript基本文法
• 変数名の後に型指定が可能
• if文やfor文などの制御構文は同じ
var hoge:string = "hoge";
if (hoge === "hoge") {
alert("true!");
}
var array = ["hoge", "fuga"];
for (var i = 0; i < array.length; i++) {
alert(array[i]);
}
http://goo.gl/tYdgG
TS
22](https://image.slidesharecdn.com/buildinsider-130607224153-phpapp02/85/Buildinsider-OFFLINE-TypeScript-22-320.jpg)
![引数について
• 省略可能引数
• デフォルト値付き引数
• 可変長引数
var func1 = (str?:string) => alert(str);
func1();
func1("Hello world");
var func2 = (str = "Hello world") => alert(str);
func2();
func2("Hello world");
var func3 = (...strs:string[]) => alert(strs.join(" "));
func3();
func3("Hello", "world");
http://goo.gl/Bt83S
29](https://image.slidesharecdn.com/buildinsider-130607224153-phpapp02/85/Buildinsider-OFFLINE-TypeScript-29-320.jpg)
![既存資産の活用
interface IScope {
// Documentation says exp is optional, but actual implementaton counts on it
$apply(exp: string): any;
$apply(exp: (scope: IScope) => any): any;
$broadcast(name: string, ...args: any[]): IAngularEvent;
$destroy(): void;
$digest(): void;
$emit(name: string, ...args: any[]): IAngularEvent;
// Documentation says exp is optional, but actual implementaton counts on it
$eval(expression: string): any;
$eval(expression: (scope: IScope) => any): any;
// Documentation says exp is optional, but actual implementaton counts on it
$evalAsync(expression: string): void;
$evalAsync(expression: (scope: IScope) => any): void;
// Defaults to false by the implementation checking strategy
• AngularJS の場合
• angular.d.ts を利用 http://goo.gl/9NrZ4
42](https://image.slidesharecdn.com/buildinsider-130607224153-phpapp02/85/Buildinsider-OFFLINE-TypeScript-42-320.jpg)
