TypeScriptへの入口

10,209 views
9,976 views

Published on

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

Published in: Technology
0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
10,209
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
21
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

TypeScriptへの入口

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

×