Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

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

2.716 visualizaciones

Publicado el

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

Publicado en: Tecnología
  • Sé el primero en comentar

用不用 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!

×