Agenda 1. 何謂大型系統？ 2. JavaScript 大型系統開發的優勢 3. 使用 JavaScript 開發大型系統面臨的問題 4. TypeScript Architecture Overview 5. TypeScript 如何解決了所有的問題？ 6. TypeScript 起手式 - 編輯器的選擇 7. 現有系統如何轉換為 TypeScript？ 8. 開始使用 TypeScript 來規劃、開發您的系統吧！

2.  喜歡程式設計、善於 Trouble-shooting 程式設計
的各種疑難問題、遊山、玩水、唱歌…..
吳俊毅 Gelis
集英信誠 - 資深.NET技術顧問
關於我

11. • Apache Cordova + Ionic
圖片來源：http://saifikram.com/2014/02/building-mobile-app-with-cordova-and-angularjs

12. • Titanium

13. • Titanium
• jsPaint

14. • Titanium
• Office 365

15. • Titanium
• Google

23. https://github.com/jashkenas/coffeescript/wiki/List-of-languages-that-compile-to-JS

25. TypeScript 將一統江湖!!!

29. • TypeScript 是一套前端的程式語言
• 出自微軟的 C# 之父 Anders Hejlsberg 之手
• 完全基於 JavaScript 的物件導向語法，有點像是「擴充
版的 JavaScript」
• 跨平台、可直行於任何瀏覽器、作業系統之中
• 可使用 ES6 標準開發應用系統，並在只支援 ES5 的瀏覽
器中執行
什麼是 TypeScript？

31. • 具備強型別，幫助你檢查是否有型別不正確的語法錯誤
• JavaScript 為弱型別語言，在撰寫的時候並不會檢查
「語法」或是「型別對應不正確」
• 完全支援物件導向相關特性，如：
• 類別（class）、建構子（constructor）、介面（interface）、繼
承（inheritance）、模組（module）來設計你的程式
• 存取範圍：可以方法利用 public / private / protected 來
限制存取權限，變數可以利用 let 來使用區域變數
• 綜合以上優點讓你有像是寫強型別的語言一樣輕鬆自在
• 編輯器可提供 design time 的型別檢查與 IntelliSense 等
功能，如:Visual Studio Code、WebStorm 等
TypeScript 如何解決了所有的問題？

33. TypeScript Architecture Overview
• TypeScriptService
• TypeScript 開源了其抽象語法樹狀(AST, Abstract Syntax Tree)分析器
• 使第三方廠商可以快速的提供 TypeScript 代碼補全、型別檢查、重構 等
• 遵循標準、非自訂標準
• 支援 ES6、取消 module 關鍵字，具備 ES6 所有特性、並能編譯成 ES5
• 只要掌握了 TypeScript ，就等於於掌握了JavaScript 語言的最新標準
來源：https://github.com/Microsoft/TypeScript/wiki/Architectural-Overview

34. • 因此，使用 TypeScript 來開發您不必在意用戶端瀏覽器
支援 ES5 or ES6
• ES5 仍然是目前市場最大宗
• 開發 TypeScript 時編寫的是 .ts 檔案，在 Server 端
Compile 為 .js
• 所以瀏覽器讀到的都還是 .js
• 從 Angular 2 開始就是
• 使用 TypeScript 來開發
使用 TypeScript 你必須要知道？
ES6
ES5
TypeScript
Superset

36. • Mozilla Shumway
• https://github.com/mozilla/shumway
• 知名專案管理工具 Asana
• https://app.asana.com/
• Angular
• https://github.com/angular
• Immutable.js
• https://github.com/facebook/immutable-js
那些大型專案使用 TypeScript？

37. • http://www.ifuun.com/a2017763595909/
• 要支持強類型
• 要有很好的配套工具
• 已經有了成功案例
• 我們的工程師可以很快上手
• 能同時工作於客戶端和伺服器
• 有優秀的類庫
為什麼著名社交網站 Reddit 選擇了 TypeScript？

39. • 使用一種語法，支援所有 ECMAScript 5 瀏覽器
• 開源、使用 Apache 2.0 授權方案，完整 Source Code 都在
Github
• 許多專案相繼導入 TypeScript
• 可以與你現有專案無縫整合
• 工具支援趨於完整 (VSCode, WebStorm, Sublime, Emac…..)
• 解決 JavaScript 長久以來的問題
你的專案應該導入 TypeScript 的理由

42. • Web Strom
• Visual Studio Code
• Atom
怎麼沒有 Visual Studio？

47. https://github.com/kkbruce/TypeScript/blob/master/doc/zh-tw/Handbook.md

57. https://graphviz.gitlab.io/

60. remojansen

63. • use Visual Studio 2017

64. use Visual Studio 2017
https://www.microsoft.com/en-us/download/details.aspx?id=55258
• 自定義：TypeScript Definition

67. https://www.npmjs.com/~types
名詞解釋：
TSD (TypeScript Definition manager for DefinitelyTyped)
typings (The TypeScript Definition)

68. https://github.com/DefinitelyTyped/DefinitelyTyped

70. 這意味著 TypeScript 自身已經不僅僅是一門語言
不是把開發者綁定在 Visual Studio 和
微軟體系中
TypeScript生態
JavaScript生態

73. https://github.com/remojansen/TsUML
https://marketplace.visualstudio.com/items?itemName=AzadRatzki.TypeScriptDiagram#overview
https://github.com/1j01/jspaint
https://kknews.cc/tech/g29g2ll.html
http://taco.visualstudio.com/en-us/docs/tutorial-ionic/
https://blogs.msdn.microsoft.com/typescript/2017/10/31/announcing-typescript-2-6/
https://www.ithome.com.tw/news/103278
http://www.graphviz.org/
http://www.typescriptlang.org/