1.
使用 TypeScript 讓你過著比別人更好的生活
用不用 TypeScript 隨便你，反正我是用了
多奇數位創意有限公司
技術總監 黃保翕（Will 保哥）
https://blog.miniasp.com

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.
強型別的程式範例
interface Data {
id: number,
name: string,
records: number[]
}
var data: Data = {
id: 1,
name: 'Will',
records: [1, 2, 3]
};

4.
圖片來源：https://yehyeah.com/joanmiro-1/
強型別

5.
5
圖片來源：https://yehyeah.com/joanmiro-1/
弱型別

6.
弱型別玩到極致
6

7.
強型別玩到極致
7

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.
將一個兩萬行 JS 專案升級 TS 的故事
• 專案時間：已經開發 1 年時間
• 開發人數：團隊規模 5 人、參與開發人數 10 人
• 程式風格：無限定
• 單元測試：無
• 開發經驗：稍微有經驗 2 人、真 ‧ Junior 工程師 3 人
• 程式行數：不含 Library 之主程式碼共 23,680 行
9

10.
TypeScript 之美 - Union
10

11.
TypeScript 之美 - Mapped Types
11

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.
TypeScript 之美 - Key Remapping
• Key Remapping in Mapped Types (TypeScript 4.1)
• Code: https://bit.ly/2RLEBvU
13

14.
TypeScript Playground
https://www.typescriptlang.org/play

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.
使用 TypeScript 的理由
• 強型別
• 更著重設計
• 適合多人開發的專案
• 與現有專案無縫整合
• 非常完整的開發工具支援
• 持續發展的社群
16

17.
相關連結
• TypeScript: Typed JavaScript at Any Scale.
• TypeScript 新手指南 (eBook)
• TypeScript 綜合格鬥技 (SlideShare)
17

18.
The Will Will Web
網路世界的學習心得與技術分享
http://blog.miniasp.com/
Facebook
Will 保哥的技術交流中心
http://www.facebook.com/will.fans
Twitter
https://twitter.com/Will_Huang
聯絡資訊

19.
THANK YOU!