typescriptへの入口
DESCRIPTION
2012/12/15 JAZUG女子部ぷれぜんつBuild祭り でのTypeScriptの話TRANSCRIPT
TypeScript への入口
Japan Windows Azure User Group
Microsoft MVP for Windows Azure
はるたま
http://twitter.com/harutama
自己紹介
• はるたま（@harutama）
–職業：プロ社畜
– Microsoft MVP for Windows Azure (Oct 2010~)
• Windows Azureのコミュニティやってます
– http://r.jazug.jp/
• クラウドごった煮の中の人もやってます
– http://www.cloudmix.jp/
2
3
4
VS 2005 and .NET 2.0 Ship Party http://www.wiltamuth.com/blog/shipparty/
代表作 Turbo Pascal
Delphi .NET Framework
C#
5
TypeScriptが生まれた背景
6
7
JavaScript の問題
• 言語仕様がゆるい
–実はブロックスコープが無い
–グローバル変数の汚染問題
–「;」が無くてもなんとなく動いたり
–「==」と「===」で比べ方が違ったり
• プロトタイプベースのオブジェクト指向
–正直なじみにくい
–プロトタイプだと自由すぎる
8
TypeScriptで導入されるもの
• 現在実装済み
–クラスベースのオブジェクト指向
–コンパイル時の静的な型チェック
–モジュール
–アロー関数式による関数の記述
• 今後導入予定
–列挙
–ジェネリック
9
10
11
ホントかよ?
大規模開発で使える？
12 http://www.publickey2.jp/2012/10/typescriptteam_foundation_server13.html
TypeScript の仕組み
13
TypeScriptコンパイラの仕組み
14
Node.js
tsc.js
TypeScript (.tsファイル)
JavaScript (.jsファイル)
lib.d.ts
コンパイラ本体
定義ファイル
定義ファイルって 何を定義するの？
という話の前に…
15
ECMA Script
• 1997年にJavaScript（当時のNetscape）とJScript（Microsoft）を標準化すべくEcma International によって策定 http://www.ecma-international.org/
• 定義されているのは言語仕様の部分
–型の種類と定義
–制御構文の定義
–演算子の種類と挙動
–とかとか
16
http://ejohn.org/blog/the-world-of-ecmascript/ 17
JavaScriptの世界
18
ECMAScript
Java Script Node.js
Windows Store Application
jQuery
form document
process fs
WinJS document $
定義ファイルの役割
• TypeScriptはECMAScript相当の部分
– 個別の環境にある変数・オブジェクトは知らないので、何とかしてコンパイラに教えてあげる手段が必要。
• 定義ファイル(d.tsファイル)を提供
– ECMAScriptに定義されている変数・オブジェクトはlib.d.tsとして定義されている。
– 環境に合わせた定義ファイルを作成すれば、型チェックやインテリセンスに反映される。
19
さまざまな定義ファイル
• 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
TypeScriptでは…
21
TypeScript
lib.d.ts node.d.ts
winjs.d.ts winrt.d.ts
jquery.d.ts
lib.d.ts
Java Script Node.js
Windows Store Application
jQuery
lib.d.tsの一部抜粋
22
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; }
TypeScript の開発環境
23
Playground
24 http://www.typescriptlang.org/Playground/
Playground
• Webで動作するTypeScriptコンパイラ
– TypeScriptの隣にコンパイル結果のJavaScriptが表示されます。
–これを使うと、コンパイルされたJavaScriptがかなりキレイなことに驚きます。
– JSXとHaxeとTypeScriptの比較に関して （型に注目した場合） http://www.slideshare.net/bleistift/jsx-haxe-typescript
25
VisualStudioプラグイン
26 http://go.microsoft.com/fwlink/?LinkID=266563
VisualStudioプラグイン
• インテリセンスが効きます！
• 楽にコンパイルするには、NuGetからパッケージを取ってくるのが簡単 – http://nuget.org/packages/Sholo.TypeScript.Build
–事前にTypeScriptの環境をインストールしておく必要があります。
• Node.jsをインストール（32ビット版を！） http://www.nodejs.org/
• Node.jsコマンドプロンプトから
npm install -g typescript
27
TypeScript Tools
29
WebMatrix
• 一番簡単にコンパイル環境を作れます
–事前にNode.jsのインストールは不要。 最初に「Compile TypeScript」ボタンを押した時に、Node.jsとTypeScriptコンパイラが勝手にインストールされます。
–アップデートもクリック一発！
• 現状ではハイライティングやインテリセンスが効きません。
30
31
T
y
p
e
S
c
r
i
p
t
な
ん
て
楽
勝
で
書
い
て
や
る
よ
L
i
n
u
x
だ
け
ど
な
！
Vim使いも Emacs使いも
32
http://blogs.msdn.com/b/interoperability/archive/2012/10/01/sublime-text-vi-emacs-typescript-enabled.aspx
参考資料
33
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
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
Let’s dream and then let’s build. - Ray Ozzie
はるたま http://twitter.com/harutama/
http://d.hatena.ne.jp/haru-tama/
36