Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

用不用 TypeScript 隨便你,反正我是用了 (JSDC2020)

2 619 vues

Publié le

無論你是前端或後端工程師,都逃不開 JavaScript 的魔掌,但是 JS 先天的弱型別特性,確實對千千萬萬開發者帶來不小的困擾。本次演講將著重在導入 TypeScript 的各種經驗分享,告訴你為什麼導入 TypeScript 之後,可以幫助你提升生命品質,過著比別人更好的生活。

Publié dans : Technologie
  • Soyez le premier à commenter

用不用 TypeScript 隨便你,反正我是用了 (JSDC2020)

  1. 1. 使用 TypeScript 讓你過著比別人更好的生活 用不用 TypeScript 隨便你,反正我是用了 多奇數位創意有限公司 技術總監 黃保翕(Will 保哥) https://blog.miniasp.com
  2. 2. JavaScript 是個「弱型別」的程式語言 var data = { id: 1, name: 'Will', records: [1, 2, 3] }; processData(data); function processData(data) { if (data.record[0].id === 1) { console.log('Awesome!'); } } JavaScript 擁有一個自由的靈魂 無法在開發時期 宣告變數型別 你永遠不知道會接到什麼物件 TypeError: Cannot read property '0' of undefined
  3. 3. 強型別的程式範例 interface Data { id: number, name: string, records: number[] } var data: Data = { id: 1, name: 'Will', records: [1, 2, 3] };
  4. 4. 圖片來源:https://yehyeah.com/joanmiro-1/ 強型別
  5. 5. 5 圖片來源:https://yehyeah.com/joanmiro-1/ 弱型別
  6. 6. 弱型別玩到極致 6
  7. 7. 強型別玩到極致 7
  8. 8. TypeScript 透過型別擴充 JavaScript • JS  TS  JS - npm i -g typescript ts-node - tsc --init - 將 *.js 直接改成 *.ts - ts-node main.ts • 理解 TS 的編譯過程 - 型別檢查只在編譯時期發生! • 開發工具看的懂你的原始碼 8 TypeScript ES 2015 ~ ES 2020 ES5
  9. 9. 將一個兩萬行 JS 專案升級 TS 的故事 • 專案時間:已經開發 1 年時間 • 開發人數:團隊規模 5 人、參與開發人數 10 人 • 程式風格:無限定 • 單元測試:無 • 開發經驗:稍微有經驗 2 人、真 ‧ Junior 工程師 3 人 • 程式行數:不含 Library 之主程式碼共 23,680 行 9
  10. 10. TypeScript 之美 - Union 10
  11. 11. TypeScript 之美 - Mapped Types 11
  12. 12. TypeScript 之美 - ReadOnly Types 12 type Person = { name: string; age: number; }; type PersonPartial = Partial<Person> type ReadonlyPerson = Readonly<Per son> var a: Person = { name: "Will", age: 18 }; var b: PersonPartial = { name: "Will" }; var c: ReadonlyPerson = { name: "Will", age: 123 }; c.name = "John";
  13. 13. TypeScript 之美 - Key Remapping • Key Remapping in Mapped Types (TypeScript 4.1) • Code: https://bit.ly/2RLEBvU 13
  14. 14. TypeScript Playground https://www.typescriptlang.org/play
  15. 15. 完整的 TypeScript 發行紀錄 • TypeScript Release Notes https://www.typescriptlang.org/docs/handbook/release-notes/ - Announcing TypeScript 4.1 Beta - Announcing TypeScript 4.0 - Announcing TypeScript 3.9 - Announcing TypeScript 3.8 - Announcing TypeScript 3.7 - Announcing TypeScript 3.6 - Announcing TypeScript 3.5 - ... 15
  16. 16. 使用 TypeScript 的理由 • 強型別 • 更著重設計 • 適合多人開發的專案 • 與現有專案無縫整合 • 非常完整的開發工具支援 • 持續發展的社群 16
  17. 17. 相關連結 • TypeScript: Typed JavaScript at Any Scale. • TypeScript 新手指南 (eBook) • TypeScript 綜合格鬥技 (SlideShare) 17
  18. 18. The Will Will Web 網路世界的學習心得與技術分享 http://blog.miniasp.com/ Facebook Will 保哥的技術交流中心 http://www.facebook.com/will.fans Twitter https://twitter.com/Will_Huang 聯絡資訊
  19. 19. THANK YOU!

×