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