Your SlideShare is downloading. ×
TypeScript 開發實戰:開發即時互動的 html5 websocket 聊天室應用程式
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

TypeScript 開發實戰:開發即時互動的 html5 websocket 聊天室應用程式

10,689
views

Published on

Published in: Technology

0 Comments
25 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
10,689
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
61
Comments
0
Likes
25
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 開發實戰 開發即時互動的 HTML5 WebSocket 聊天室應用程式 多奇數位創意有限公司 技術總監 黃保翕 ( Will 保哥 ) 部落格:http://blog.miniasp.com/1
  • 2. All services from your imperative. JavaScript for tools TYPESCRIPT 簡介2
  • 3. TYPESCRIPT 簡介 All services from your imperative.  TypeScript = "靜態型別" + "動態型別" 程式語言  用「靜態型別」語法來描述 JavaScript 的動態型別  TypeScript 語法涵蓋完整 JavaScript 語法  TypeScript = JavaScript + OOP語法  支援 class (類別)、interface (介面)、module (模組)  TypeScript 最終將編譯成 JavaScript (無靜態型別)  語法相容於 ECMAScript 3 (ES3)  Any browser. Any host. Any OS. (含Node.js)  TypeScript 是一個工具語言!(適用於開發時期)  TypeScript 適合用來開發 Web 應用程式  靜態型別, 編譯器, 開發工具支援, 開源碼, 免費3
  • 4. TypeScript 語法 All services from your imperative.  語法 v.s. 關鍵字  所有 ES3 語法  module  class , extends  constructor  export  public, private  interface  implements  ? (nullable)4
  • 5. All services from your imperative. 現有專案如何循序漸進的改用 TypeScript 開發 JavaScript 應用程式 TYPESCRIPT 開發實戰5
  • 6. STEP 0. 變更副檔名 All services from your imperative.  作業方式  將 *.js 直接改成 *.ts  修正建置動作: TypeScriptCompile  儲存全部 (Save All) 或 方案重開  注意事項  Visual Studio 2012 的專案裡,至少要有先有 一個 TypeScript 檔案,才能在手動修正副檔 名時選擇 “TypeScriptCompile” 這個建置動作 (Build Action)6
  • 7. STEP 0. 變更副檔名 All services from your imperative.  *.ts  標準 TypeScript 副檔名  *.d.ts  d is stand for declaration  此為 TypeScript 宣告檔專用的副檔名  用來預先宣告 TypeScript 開發環境中可能會 用到的變數、函數與物件,物件的部分皆以 interface 的方式宣告7
  • 8. STEP 1. 型別註釋 (Type Annotations) All services from your imperative.  通用型別  所有型別都是 any 的子型別  基本上 any 就是 JavaScript 可用的任意型別  基本型別  物件型別  number  interface  bool  module  string  class  null  支援 literal 型別  undefined  支援陣列型別8
  • 9. STEP 1. 型別註釋 (Type Annotations) All services from your imperative.  標示型別  變數宣告 (全域變數、類別變數、區域變數)  使用 : T 表示法  function 參數支援 optional types 運算子: ?  函式回傳值  支援型別推導  函式傳入參數9
  • 10. 陣列型別的用法 All services from your imperative.10
  • 11. STEP 2. 加入宣告參考 All services from your imperative.  加入方式  內建宣告參考: lib.d.ts  加入參考 /// <reference path="jquery.d.ts"/>  參考資源  TypeScript Source Code http://typescript.codeplex.com/SourceControl/BrowseLatest  DefinitelyTyped https://github.com/borisyankov/DefinitelyTyped#readme  RaphaelTS https://bitbucket.org/keesey/raphaelts  Raphaël—JavaScript Library http://raphaeljs.com/11
  • 12. STEP 3. 重構 JS 程式碼 All services from your imperative.  使用 class 定義類別  使用 interface 定義介面  使用 module 定義模組 (命名空間)  善用 TypeScript 工具支援12
  • 13. 使用 class 定義類別 All services from your imperative.  可存取性限制  使用 public 與 private 關鍵字區分(僅限工具使用)  沒有 protected  繼承特性  僅支援單一繼承  衍生類別可以透過 super 呼叫父類別方法  其他  Parameter property declarations via constructor.13
  • 14. TS 型別檢查 / JS 型別檢查 All services from your imperative.  注意事項  類別中的私有變數,只會在TS編譯器中檢查  不過就算編譯器會報錯,JS 還是會順利產生!  如下範例: class Test { private member: any = "private member"; } alert(new Test().member);14
  • 15. 使用 interface 定義介面 All services from your imperative.  特性  僅定義給工具使用,不會產生任何程式碼  屬「結構型別系統」  在 TypeScript 中,所有物件會依據 prototype 自動 產生介面,因此「匿名型別」不用強制轉型,就 能自動變成特定介面型別。  示範: structual_types.ts  支援多載函式,依據不同參數簽名(signature)  可定義於多個檔案,並可載入其他檔案  可實作多重介面15
  • 16. 使用 module 定義模組 (命名空間) All services from your imperative.  特性  類似 .NET 的命名空間  可有效避免變數名稱衝突  可有效定義模組裡類別的可見性  internal modules  預設  external modules  套上 export 關鍵字16
  • 17. 善用 TypeScript 工具支援 All services from your imperative.  Visual Studio 2012  自動型別檢查 (Static type checking)  隱含強型別推演 (Strong type inference)  移至定義 (Go To Definition) ( F12 )  巡覽至 (Navigate To) ( Ctrl + , )  語法自動完成 / Intellisense ( Ctrl + j )  程式碼重構 (Code refactoring) ( F2 )  下載: TypeScript for Visual Studio 2012 ( v0.8.1.1 )  Monaco (線上版編輯器)  http://www.typescriptlang.org/Playground/17
  • 18. TypeScript 的工具支援 All services from your imperative.  TypeScript support for Sublime Text  http://www.interoperabilitybridges.com/media/15545 2/typescript_support_for_sublime_text.zip  TypeScript support for Emacs  http://www.interoperabilitybridges.com/media/15544 9/typescript_support_for_emacs.zip  TypeScript support for Vim  http://www.interoperabilitybridges.com/media/15544 6/typescript_support_for_vim.zip18
  • 19. STEP 4. 偵錯方式 All services from your imperative.  設計時期 (Design Time)  開發工具  即時型別檢查  即時 JavaScript 程式碼預覽 (Web Essentials 2012)  編譯器型別檢查  預設會將專案中所有 TypeScript 載入合併編譯  預先查出重複的型別定義(變數、類別、函式、…)  執行時期 (Run Time)  使用 Source Map 進行偵錯 ( Google Chrome )  中斷點  單步偵錯  監看式19
  • 20. Source Map 支援 All services from your imperative.  問題  TypeScript-to-JavaScript → Debug JavaScript ??  解決方案  Source Map !!  自動對應目前的 JS 程式碼到 TS 程式碼  支援中斷點與逐步偵錯 Introduction to JavaScript Source Maps - HTML5 Rocks http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/20
  • 21. 使用 TypeScript 的理由? All services from your imperative.  支援 ECMAScript 6 語法,執行在 ECMAScript 3 的瀏覽器上 (IE6+) ES 6 的 module, class ES 3 的相容性: http://www.webdevout.net/browser-support-ecmascript  開源碼,採用 Apache 2.0 授權,可從 CodePlex 下載 http://typescript.codeplex.com/  工具支援 (Visual Studio 2012, Vi, Emac, Sublime Text) 支援 Intellisense、型別檢查、型別推導、程式碼重構、巡覽至、符號搜尋  與現有專案無縫整合 8 → ∞  名家之著 Anders Hejlsburg - C# 之父21
  • 22. 不用 TypeScript 的理由? All services from your imperative.  目前還在 Preview 階段 TypeScript 0.8.1.1  還不斷發現 Bugs、工具支援也還在陸續開發(不過前景可期)  有限的支援與函式庫(需要時間解決)  目前版本尚未支援泛型(但 TypeScript 規格中已經有定義)  所有型別都是 nullable 型別  僅 Visual Studio 2012 與 Monaco web editor 支援較完整的工具特性22
  • 23. 結論 All services from your imperative.  TypeScript 值得一試  現在就能用在專案上,沒有相容性問題  循序漸進的改善 JavaScript 程式碼品質  工欲善其事,必先利其器! Visual Studio 2012 是你的好朋友 23
  • 24. 參考連結 All services from your imperative.  TypeScript 官網  http://www.typescriptlang.org/  TypeScript 部落格  http://blogs.msdn.com/b/typescript/  TypeScript 原始碼下載  http://typescript.codeplex.com/SourceControl/BrowseLatest  TypeScript Language Specification  http://go.microsoft.com/fwlink/?LinkId=267121  多奇技術分享會 - 微軟最新程式語言:TypeScript 介紹  http://www.youtube.com/watch?v=BicYCnjBYvc  【TypeScript 開發實戰】LIVE DEMO 原始碼  https://github.com/doggy8088/typescript-webconf201324
  • 25. 聯絡資訊 All services from your imperative.  The Will Will Web 記載著 Will 在網路世界的學習心得與技術分享  http://blog.miniasp.com/  Will 保哥的技術交流中心 (臉書粉絲專頁)  http://www.facebook.com/will.fans  ★ ★ ★ Will 保哥的噗浪 ★ ★ ★  http://www.plurk.com/willh/invite25
  • 26. All services from your imperative. Q & A26
  • 27. All services from your imperative. 感謝各位27