2012/12/15　JAZUG女子部ぷれぜんつBuild祭り　でのTypeScriptの話

1. TypeScript への入口
Japan Windows Azure User Group
Microsoft MVP for Windows Azure
はるたま
http://twitter.com/harutama

2. 自己紹介
• はるたま（@harutama）
– 職業：プロ社畜
– Microsoft MVP for Windows Azure
(Oct 2010~)
• Windows Azureのコミュニティやってます
– http://r.jazug.jp/
• クラウドごった煮の中の人もやってます
– http://www.cloudmix.jp/
2

3. 3

4. 4

5. 代表作
Turbo Pascal
Delphi
.NET Framework
C#
VS 2005 and .NET 2.0 Ship Party
http://www.wiltamuth.com/blog/shipparty/ 5

6. TypeScriptが生まれた背景
6

7. 7

8. JavaScript の問題
• 言語仕様がゆるい
– 実はブロックスコープが無い
– グローバル変数の汚染問題
– 「;」が無くてもなんとなく動いたり
– 「==」と「===」で比べ方が違ったり
• プロトタイプベースのオブジェクト指向
– 正直なじみにくい
– プロトタイプだと自由すぎる
8

9. TypeScriptで導入されるもの
• 現在実装済み
– クラスベースのオブジェクト指向
– コンパイル時の静的な型チェック
– モジュール
– アロー関数式による関数の記述
• 今後導入予定
– 列挙
– ジェネリック
9

10. 10

11. ホントかよ?
11

12. 大規模開発で使える？
http://www.publickey2.jp/2012/10/typescriptteam_foundation_server13.html
12

13. TypeScript の仕組み
13

14. TypeScriptコンパイラの仕組み
定義ファイル
lib.d.ts
TypeScript JavaScript
(.tsファイル) (.jsファイル)
tsc.js
Node.js
コンパイラ本体
14

15. 定義ファイルって
何を定義するの？
という話の前に…
15

16. ECMA Script
• 1997年にJavaScript（当時のNetscape）
とJScript（Microsoft）を標準化すべく
Ecma International によって策定
http://www.ecma-international.org/
• 定義されているのは言語仕様の部分
– 型の種類と定義
– 制御構文の定義
– 演算子の種類と挙動
– とかとか
16

17. http://ejohn.org/blog/the-world-of-ecmascript/ 17

18. JavaScriptの世界
ECMAScript
form process
document fs
Java Script Node.js
WinJS
$ document
Windows
jQuery
Store Application
18

19. 定義ファイルの役割
• TypeScriptはECMAScript相当の部分
– 個別の環境にある変数・オブジェクトは知らないので、
何とかしてコンパイラに教えてあげる手段が必要。
• 定義ファイル(d.tsファイル)を提供
– ECMAScriptに定義されている変数・オブジェクトは
lib.d.tsとして定義されている。
– 環境に合わせた定義ファイルを作成すれば、型チェッ
クやインテリセンスに反映される。
19

20. さまざまな定義ファイル
• TypeScript のソースから入手
http://typescript.codeplex.com/SourceControl/BrowseLatest
– JavaScript bin¥lib.d.ts
– jQuery bin¥jquery.d.ts
– ストアアプリ bin¥winjs.d.ts winrt.d.ts
– Node.js samples¥node¥ node.d.ts
• NuGet から
– Google Maps v3 - TypeScript Definition
https://www.nuget.org/packages/google.maps.d.ts
– Bing Maps TypeScript Declarations
https://www.nuget.org/packages/BingMapsTypeScript
20

21. TypeScriptでは…
lib.d.ts
TypeScript
lib.d.ts node.d.ts
Java Script Node.js
winjs.d.ts
jquery.d.ts
winrt.d.ts
Windows
jQuery
Store Application
21

22. lib.d.tsの一部抜粋
interface Number {
toString(radix?: number): string;
toFixed(fractionDigits?: number): string;
toExponential(fractionDigits?: number): string;
toPrecision(precision: number): string;
}
declare var Number: {
new (value?: any): Number;
(value?: any): number;
prototype: Number;
MAX_VALUE: number;
MIN_VALUE: number;
NaN: number;
NEGATIVE_INFINITY: number;
POSITIVE_INFINITY: number;
}
22

23. TypeScript の開発環境
23

24. Playground
http://www.typescriptlang.org/Playground/
24

25. Playground
• Webで動作するTypeScriptコンパイラ
– TypeScriptの隣にコンパイル結果のJavaScript
が表示されます。
– これを使うと、コンパイルされたJavaScriptがか
なりキレイなことに驚きます。
– JSXとHaxeとTypeScriptの比較に関して
（型に注目した場合）
http://www.slideshare.net/bleistift/jsx-haxe-typescript
25

26. VisualStudioプラグイン
http://go.microsoft.com/fwlink/?LinkID=266563 26

27. VisualStudioプラグイン
• インテリセンスが効きます！
• 楽にコンパイルするには、NuGetからパッ
ケージを取ってくるのが簡単
– http://nuget.org/packages/Sholo.TypeScript.Build
– 事前にTypeScriptの環境をインストールしてお
く必要があります。
• Node.jsをインストール（32ビット版を！）
http://www.nodejs.org/
• Node.jsコマンドプロンプトから
npm install -g typescript
27

28. WebMatrix
http://www.microsoft.com/web/webmatrix/ 28

29. TypeScript Tools
29

30. WebMatrix
• 一番簡単にコンパイル環境を作れます
– 事前にNode.jsのインストールは不要。
最初に「Compile TypeScript」ボタンを押した
時に、Node.jsとTypeScriptコンパイラが勝手に
インストールされます。
– アップデートもクリック一発！
• 現状ではハイライティングやインテリセンス
が効きません。
30

31. 書 な S T
だ L
い ん c y
け i
ど n て て r p
な u や 楽 i e
！ x る 勝 p
よ で t
31

32. Vim使いも Emacs使いも
http://blogs.msdn.com/b/interoperability/archive/2012/10/01
/sublime-text-vi-emacs-typescript-enabled.aspx
32

33. 参考資料
33

34. Microsoft 公式
• 公式サイト
http://www.typescriptlang.org/
• ソースコード
http://typescript.codeplex.com/
• 言語仕様（PDF）
http://go.microsoft.com/fwlink/?LinkId=267238
• Introducing TypeScript: A language for application-
scale JavaScript development
http://channel9.msdn.com/Events/Build/2012/3-012
• Inside Typescript
http://channel9.msdn.com/Events/Ch9Live/Channel-9-
Live-at-BUILD-2012/Inside-Typescript
34

35. Blog系
• TypeScript クイックガイド
http://phyzkit.net/typescript/index.html
• TypeScriptの機能をもう少し試してみる
http://dev.classmethod.jp/client-side/language-client-
side/typescript2/
• 静的型付けをもつJavaScriptへのトランスコンパイル言語
を味見してみた
http://dev.classmethod.jp/server-
side/language/haxe-jsx-typescript1/
• TypeScriptでenchant.js
http://jsdo.it/nishink/1H0W
• TypeScript で Titanium Mobile を遊ぶ
http://imthinker.net/2012/10/typescript-titanium/
35

36. Let’s dream and then let’s build.
- Ray Ozzie
はるたま
http://twitter.com/harutama/
http://d.hatena.ne.jp/haru-tama/
36