TypeScriptへの入口

  • 5,958 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,958
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
20
Comments
0
Likes
10

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. TypeScript への入口Japan Windows Azure User GroupMicrosoft 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 Partyhttp://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 processdocument 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.tsjquery.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