TypeScriptは明日から使うべきですよ。

1. TypeScriptは明日から使うべき
MTI 技術の泉
@vvakame

2. わかめ まさひろ
GAE
Android
@v vakame
TypeScript
AngularJS

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

4. なぜ、TypeScriptか？
どーして？

5. Type?
• Type = 型!
• 型は多くのプログラミング言語に存在!
• “型”の扱いには言語ごとに優劣がある!
• 静的型付け!
• 動的型付け

6. 静的型付け
• 静的解析で多くの整合性検査が可能!
• 不整合があったらコンパイルエラー!
• int hoge = “Hoge”;!
• ↑エラー！!
• 大規模・大人数 になるほど利点⤴!
• Java・C# などが有名

7. 動的型付け
• 型がないわけではないんだけども…!
• 静的に検証しない(できない!
• hoge = “Hi!” ; hoge = 1 ;!
• 問題なし！(ある場合もある!
• テストの重要性⤴ 大人数開発…⤵!
• Ruby・Python などが有名

8. static vs dynamic
一体、どっちがいいの？

9. Python
http://goo.gl/9mcMSq
静的な型チェック！

10. Ruby
http://goo.gl/U0eYLQ Rubyよお前もか！

11. 時代は静的型付けだ！
• 動的型付けの利点は確かにある!
• テスト書きやすい!
• 黒魔術しやすい!
• デメリットもある!
• テストしっかり書かないと死ぬ!
• リファクタリングめっちゃ怖い

12. 王者 JavaScript
• 昔はOFFにしとけとか言われてたのに!
• 今や花形ですよ！!
• JavaScript実行しない日があるだろうか!
• いや、ない！

13. だがしかし…
• しかしJavaScriptさんはマジガバガバ!
• 動的型付けだしー!
• そんな言語仕様でいいんですか…？!
• クラス無い!
• prototypeとかいうのはある(小声!
• モジュール(パッケージ)無い!
• 安全に開発できない！！！

14. そこでTypeScriptですよ
• 静的型付けなJavaScript！!
• クラスある！!
• モジュールある！
サイキョーやん？

15. TypeScriptの特長

16. TypeScriptの特長
• TypeScriptはJavaScriptを拡張した言語!
• 静的型付け！!
• ECMAScript 6規格の文法を先取り☆!
• 読みやすい変換後JavaScript!
• Java, C# とかに優しい言語仕様!
• 長いコンパイル時間 → 1.1.0 で改善
最も現実的なaltJSだ！

17. 親Microsoft情報
• Microsoftが作ってる!
• Visual Studio がサポートしている！!
• C#作者が作ってる！
でも僕はMacで使ってる

18. Why needs 型？
• 多くのエラーをコンパイル時に!
• 実行時エラーはもううんざり！!
• 間違った使い方は不可能に!
• リファクタリングも安心確実！!
• コンパイルが通ればある程度動く！!
• IDEなどのサポートが得られやすい
JS完全互換！

19. TypeScriptでの型
• primitive type 御三家!
• number!
• string!
• boolean
JS完全互換！

20. TypeScriptでの型
• 忘れちゃならない!
• any!
• void
JS完全互換！

21. TypeScriptでの型
• class!
• 実体も型も存在するイケメン!
• interface!
• 地味 型しか存在しない!
• object type literal!
• ↑TypeScriptリファレンス参照!
• 雑に説明すると即席interface
module君も一応いる

22. TypeScriptでの型
• ECMAScriptにいるやつ!
• DateとかArrayとかFunctionとか!
• ブラウザにいるやつ!
• windowとかDOM系のやつとか
↑結局classかinterface

23. TypeScriptの基本構文
TypeScriptチートシート
http://goo.gl/QiXe8t

24. 型注釈
var str1: string = "string";
var str2: number = "string"; // エラー！
var str3 = "string"; // 初期化子の型から型推論されstringを指定したのと等価
str3 = 1; // エラー！
!
var b: boolean = true;
var n: number = 1;
!
var a: any = true;
a = 1; // any は何でもOK！
http://goo.gl/jKVeHw

25. クラス
http://goo.gl/l3zjBi
class Hoge {
name: string;
constructor(name: string) {
this.name = name;
}
hello(): string{
return "Hello, " + this.name;
}
}
!
var obj = new Hoge("world");
window.alert(obj.hello());

26. インタフェース
http://goo.gl/GQD89G
interface IHoge {
str: string;
num: number;
}
!
var obj: IHoge = {
str: "string",
num: 1
};
!
window.alert(obj.str + obj.num);

27. 内部モジュール
http://goo.gl/gvjgTU
module sample {
export var str = "string";
export class Hoge {
hello(word: string): string {
return "Hello, " + word;
}
}
}
module sample2 {
// SampleB.Hoge を Piyoとしてインポート
import Piyo = sample.Hoge;
export var str = new Piyo().hello("TypeScript");
}
window.alert(sample2.str);

28. 既存資産の活用
今まで書いたJSも使える

29. TypeScript & JavaScript
• JSのライブラリが使いたい！!
• jQuery!
• AngularJS!
• mocha!
• etc…!
• お任せください！
既存資産も使う！

30. DefinitelyTyped
github.com/borisyankov/DefinitelyTyped
definitely/déf(ə)nətli/
→define
副詞more ～; most ～
2 明確に, はっきりと〈断る述べる決めるなど〉.
type/taɪp/
〖語源は「打ってできた形型」〗
(形)typical, (副)typically
名詞複～s/-s/
1 C(ある特性を共有する)型, タイプ, 類型; 種類(kind2, sort)
ウィズダム英和辞典より
definitelytyped.org
I’m committer!

31. 型定義ファイル .d.ts
Over 550!

32. 既存JSに型を後付けする
interface Moment {
!
format(format: string): string;
format(): string;
!
fromNow(withoutSuffix?: boolean): string;
!
startOf(soort: string): Moment;
endOf(soort: string): Moment;
!
add(input: MomentInput): Moment;
add(soort: string, aantal: number): Moment;
add(duration: Duration): Moment;
subtract(input: MomentInput): Moment;
subtract(soort: string, aantal: number): Moment;
!
calendar(): string;
clone(): Moment;
!
valueOf(): number;
!
local(): Moment; // current date/time in local mode
!
utc(): Moment; // current date/time in UTC mode
!
isValid(): boolean;
http://momentjs.com/
goo.gl/9QnuC3

33. 完全網羅！
TypeScriptリファレンス
紙･電子共 好評発売中！
Amazon(紙, Kindle)
達人出版会(PDF)

34. mozaic.fm
#5 TypeScript
#8 AltJS in LL Diver
2回くらい話した

35. 実際の開発風景
見学してみよう！

36. 質問？