Your SlideShare is downloading. ×
JavaScript 物件導向觀念入門 v.s. TypeScript 開發實戰 (微軟實戰課程日)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JavaScript 物件導向觀念入門 v.s. TypeScript 開發實戰 (微軟實戰課程日)

7,238

Published on

TypeScript 是一個可以編譯成 JavaScript 的中繼語言,擁有強型別、支援編譯時期型別檢查、完整 VS2012 開發工具整合、微軟官方支援的語言,在未來,或許你會日夜與他為伍。 …

TypeScript 是一個可以編譯成 JavaScript 的中繼語言,擁有強型別、支援編譯時期型別檢查、完整 VS2012 開發工具整合、微軟官方支援的語言,在未來,或許你會日夜與他為伍。

本次在「微軟實戰課程日」分享的「Type script 開發實戰」還包含了「JavaScript 物件導向觀念入門」等重要觀念,學習起來後將能更有助於理解 TypeScript 所帶來的優勢。

Published in: Technology
1 Comment
35 Likes
Statistics
Notes
No Downloads
Views
Total Views
7,238
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
52
Comments
1
Likes
35
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
  • No expectations upon youWe invite you to join activitiesMicrosoft has no expectations of MVPs beyond courtesy, professionalism, and adherence to the rules of conduct (https://mvp.support.microsoft.com/default.aspx/codeofconduct)Remember the Non-Disclosure Agreement
  • Transcript

    • 1. 1TypeScript 開發實戰多奇數位創意有限公司技術總監 黃保翕 ( Will 保哥 )部落格:http://blog.miniasp.com/1
    • 2. All services from your imperative.2JAVASCRIPT 物件導向觀念入門Object-Oriented JavaScript
    • 3. All services from your imperative.3Douglas Crockford 大師說: JavaScript:世界上被誤解最深的程式語言http://javascript.crockford.com/javascript.html
    • 4. All services from your imperative.4JavaScript 的型別概念 JavaScript 變數類型 String Number Boolean Object Array Date Null ? Undefined
    • 5. All services from your imperative.5JavaScript 的型別概念 JavaScript 型別分類 基礎型別 (Primitive Type) string number boolean undefined null 物件型別 (Object Type) object Function Array null ?
    • 6. All services from your imperative.6JavaScript 的型別概念 JavaScript 是一種動態型別的語言 var x;var x = 5;var x = "John"; var carname="Volvo";var carname; 這種變數型別又稱「弱型別」 (Weak Type)
    • 7. All services from your imperative.7JavaScript 的物件概念 JavaScript 物件,僅包含屬性與方法 var car = new Object(); 屬性 car.name = "BMW"; 方法 car.start(); "Everything" in JavaScript is an Object! var txt = "Hello World"; txt.length txt.indexOf(World);
    • 8. All services from your imperative.8JavaScript 的物件概念 JavaScript 如何建立一個物件 var car = new Object(); car.name = "BMW"; car.start = function() {return true;} Object - JavaScript | MDN
    • 9. All services from your imperative.9隨堂測驗 (1) 請回答以下問題: var o1 = Hello World; var o2 = new String(Hello World); o1 == o2 o1 === o2 typeof o1 typeof o2
    • 10. All services from your imperative.10隨堂測驗 (2) 以下陳述式是否會發生例外? var car = Hello World; car.name = "BMW"; car.start = function() {return true;} car.start();
    • 11. All services from your imperative.11隨堂測驗 (3) 以下陳述式是否會發生例外? var car = new String(Hello World); car.name = "BMW"; car.start = function() {return true;} car.start();
    • 12. All services from your imperative.12隨堂測驗 (4) 以下陳述式 txt.name 結果為何? var car = Hello World; String.prototype.name = "BMW"; String.prototype.start = function(){return true;} var txt = Will; txt.name
    • 13. All services from your imperative.13隨堂測驗 (5) 以下陳述式 txt.name 結果為何? var car = new String(Hello World); String.prototype.name = "BMW"; String.prototype.start = function(){return true;} var txt = Will; txt.name
    • 14. All services from your imperative.14JavaScript 的函數概念 JavaScript 如何建立一個函數 (1) function HelloWorld(){return "Hello World";}
    • 15. All services from your imperative.15JavaScript 的函數概念 JavaScript 如何建立一個函數 (2) var myFunc = function(){return "Hello World";} window.myFunc = function(){return "Hello World";} Function - JavaScript | MDN
    • 16. All services from your imperative.16JavaScript 的函數概念 JavaScript 如何建立一個函數 (3) var myFunc = new Function("return Hello World!!");
    • 17. All services from your imperative.17隨堂測驗 (6) 以下陳述式 txt.name 結果為何? var o1 = function() {} var o2 = new Function(); o1 == o2 o1 === o2 typeof o1 typeof o2Zeros in JavaScripthttp://zero.milosz.ca/
    • 18. All services from your imperative.18隨堂測驗 (7) 這到底在寫什麼? var A = function(foo){ var B = function() { return A.prototype.constructor.apply(B, arguments); }; B.prototype = A.prototype; return B; }; 對不起,我又讓誤解加深了! >"<
    • 19. All services from your imperative.19JavaScript 的類別概念 只有函數(Function)、沒有類別(Class ) 如何宣告一個類類別 透過 Function 宣告一個 "Class" var oo = function(){ this.a = 1; this.b = 11; this.c = function() { return ok; } } 宣告一個新物件 var oo2 = new oo(); oo2
    • 20. All services from your imperative.20JavaScript 的類別概念 物件存取範圍? (Public / Private / Protected) JavaScript 沒有 Class 只有 Function Function 是一種 Object 所有 Object 屬性都是公開的 (public) 所以 JS 的類類別沒有 private 或 protected 存取範圍!!
    • 21. All services from your imperative.21TYPESCRIPT 簡介JavaScript for tools
    • 22. All services from your imperative.22TYPESCRIPT 簡介 TypeScript = "靜態型別" + "動態型別" 用「靜態型別」語法來描述 JavaScript 的動態型別 TypeScript 語法涵蓋完整 JavaScript 語法 TypeScript = JavaScript + Class-based OOP 語法 支援 class (類別)、interface (介面)、module (模組) TypeScript 最終將編譯成傳統的 JavaScript 語法相容於 ECMAScript 3 (ES3) Any browser. Any host. Any OS. (含Node.js) TypeScript 是一個工具語言!(適用於開發時期) TypeScript 適合用來開發 Web 應用程式 靜態型別, 編譯器, 開發工具支援, 開源碼, 免費
    • 23. All services from your imperative.23TypeScript 語法 語法 v.s. 關鍵字 所有 ES3 語法 module class , extends constructor export public, private interface implements ? (nullable)
    • 24. All services from your imperative.24TYPESCRIPT 開發實戰現有專案如何循序漸進的改用 TypeScript 開發 JavaScript 應用程式
    • 25. All services from your imperative.25STEP 0. 變更副檔名 作業方式 將 *.js 直接改成 *.ts 修正建置動作: TypeScriptCompile 注意事項 Visual Studio 2012 的專案裡,至少要有先有一個 TypeScript 檔案,才能在手動修正副檔名時選擇 “TypeScriptCompile” 這個建置動作(Build Action)
    • 26. All services from your imperative.26STEP 0. 變更副檔名 *.ts 標準 TypeScript 副檔名 *.d.ts d is stand for declaration 此為 TypeScript 宣告檔專用的副檔名 用來預先宣告 TypeScript 開發環境中可能會用到的變數、函數與物件,物件的部分皆以interface 的方式宣告
    • 27. All services from your imperative.27STEP 1. 型別註釋 (Type Annotations) 通用型別 所有型別都是 any 的子型別 (類似 .NET 的 Object 型別) 基本上 any 就是 JavaScript 可用的任意型別 基本型別 number bool ( boolean1 ) string null undefined 物件型別 interface module class 支援 literal 型別 支援陣列型別21 新版 TypeScript v0.9 將 bool 型別改名為 boolean2 新版 TypeScript v0.9 將新增陣列泛型型別
    • 28. All services from your imperative.29STEP 1. 型別註釋 (Type Annotations) 標示型別 變數宣告 (全域變數、類別變數、區域變數) 使用 : T 表示法 function 參數支援 optional types 運算子: ? 函式回傳值 支援型別推導 函式傳入參數
    • 29. All services from your imperative.32陣列型別的用法
    • 30. All services from your imperative.33STEP 2. 加入宣告參考 加入方式 內建宣告參考: lib.d.ts 加入參考/// <reference path="jquery.d.ts"/> 參考資源 TypeScript Source Codehttp://typescript.codeplex.com/SourceControl/BrowseLatest DefinitelyTypedhttps://github.com/borisyankov/DefinitelyTyped#readme AngularJShttps://github.com/borisyankov/DefinitelyTyped/wiki/AngularJS-Definitions-Usage-Notes
    • 31. All services from your imperative.34STEP 3. 重構 JS 程式碼 使用 class 定義類別 使用 interface 定義介面 使用 module 定義模組 (命名空間) 善用 TypeScript 工具支援
    • 32. All services from your imperative.35使用 class 定義類別 可存取性限制 使用 public 與 private 關鍵字區分(僅限工具使用) 沒有 protected 繼承特性 僅支援單一繼承 衍生類別可以透過 super 呼叫父類別方法 其他 Parameter property declarations viaconstructor.
    • 33. All services from your imperative.37TS 型別檢查 / JS 型別檢查 注意事項 類別中的私有變數,只會在 TS 編譯器 中檢查 不過就算編譯器會報錯,JS 還是會順利產生! 如下範例:class Test{private member: any = "private member";}alert(new Test().member);
    • 34. All services from your imperative.38使用 interface 定義介面 特性 僅定義給工具使用,不會產生任何程式碼 屬「結構型別系統」 在 TypeScript 中,所有物件會依據 prototype 自動產生介面,因此「匿名型別」不用強制轉型,就能自動變成特定介面型別。 示範: structual_types.ts 支援多載函式,依據不同參數簽名(signature) 可定義於多個檔案,並可載入其他檔案 可實作多重介面
    • 35. All services from your imperative.39使用 module 定義模組 (命名空間) 特性 類似 .NET 的命名空間 可有效避免變數名稱衝突 可有效定義模組裡類別的可見性 internal modules  預設 external modules  套上 export 關鍵字在類別上
    • 36. All services from your imperative.40善用 TypeScript 工具支援 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/
    • 37. All services from your imperative.41TypeScript 的工具支援 TypeScript support for Sublime Text http://www.interoperabilitybridges.com/media/155452/typescript_support_for_sublime_text.zip TypeScript support for Emacs http://www.interoperabilitybridges.com/media/155449/typescript_support_for_emacs.zip TypeScript support for Vim http://www.interoperabilitybridges.com/media/155446/typescript_support_for_vim.zip
    • 38. All services from your imperative.42STEP 4. 偵錯方式 設計時期 (Design Time) 開發工具 即時型別檢查 即時 JavaScript 程式碼預覽 (Web Essentials 2012) 編譯器型別檢查 預設會將專案中所有 TypeScript 載入合併編譯 預先查出重複的型別定義(變數、類別、函式、…) 執行時期 (Run Time) 使用 Source Map 進行偵錯 ( Google Chrome ) 中斷點 單步偵錯 監看式
    • 39. All services from your imperative.43Source Map 支援 問題 TypeScript-to-JavaScript → Debug JavaScript ?? 解決方案 Source Map !! 自動對應目前的 JS 程式碼到 TS 程式碼 支援中斷點與逐步偵錯Introduction to JavaScript Source Maps - HTML5 Rockshttp://www.html5rocks.com/en/tutorials/developertools/sourcemaps/
    • 40. All services from your imperative.45TypeScript 執行方式 透過工具事先轉換成 JavaScript 相容於 ECMAScript 3 可執行在各瀏覽器或 node.js 直接在 Browser 執行 TypeScript typescript.jshttps://github.com/niutech/typescript-compile live demo
    • 41. All services from your imperative.46使用 TypeScript 的 5 大理由? 支援 ECMAScript 6 語法,執行在 ECMAScript 3 的瀏覽器上 (IE6+)ES 6 的 module, classES 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# 之父
    • 42. All services from your imperative.47不用 TypeScript 的 6 大理由? 目前還在 Preview 階段TypeScript 0.8.3.1 還不斷發現 Bugs、工具支援也還在陸續開發(不過前景可期) 有限的支援與函式庫(需要時間解決) 目前版本尚未支援泛型(但 TypeScript 規格中已經有定義) 所有型別都是 nullable 型別 僅 Visual Studio 2012 與 Monaco web editor 支援較完整的工具特性
    • 43. All services from your imperative.48結論 TypeScript 值得一試 現在就能用在專案上,沒有相容性問題 循序漸進的改善 JavaScript 程式碼品質 工欲善其事,必先利其器!Visual Studio 2012 是你的好朋友 
    • 44. All services from your imperative.49參考連結 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
    • 45. All services from your imperative.50聯絡資訊 The Will Will Web記載著 Will 在網路世界的學習心得與技術分享 http://blog.miniasp.com/ Will 保哥的技術交流中心 (臉書粉絲專頁) http://www.facebook.com/will.fans ★ ★ ★ Will 保哥的噗浪 ★ ★ ★ http://www.plurk.com/willh/invite
    • 46. All services from your imperative.51Q & A
    • 47. All services from your imperative.52感謝各位
    • 48. All services from your imperative.53Windows Azure 雲端資源下載 Free Trial Link MSDN Subscription Offer BizSpark Offer MPN Offer
    • 49. 提醒上滿4堂課 交回問卷 問卷禮 + 抽獎
    • 50. V-Day5 8https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032548843&Culture=zh-TW&community=0

    ×