iT邦幫忙

2025 iThome 鐵人賽

DAY 1
0

大家好~歡迎來到我的 「30 天 TypeScript 大冒險」

今天是第一天,先別急著打開編譯器,我們先來聊聊:

為什麼要學 TypeScript?

畢竟,學東西總得有點理由,不然三天就放棄了。

JavaScript 很好,但專案大了就很恐怖

我超愛 JavaScript,靈活到不行,但當專案越做越大,就會開始踩雷:

  • 型別亂七八糟:本來應該是 number,結果跑進來 "123",還能照跑(但結果怪怪的)
  • 改東改西很可怕:API 參數改名,結果其他地方全爆
  • 團隊溝通困難:沒有明確型別,新人接手只能一直問

TypeScript 就像給你的程式加上「安全帽 + 保護殼」,

讓你在寫程式時就先發現坑,而不是上線才踩到。


JS vs TS,差在哪?

JavaScript:錯了也能跑


function add(a, b) {
  return a + b;
}

console.log(add(1, "2")); // "12"(字串相接,尷尬)

TypeScript:不讓你亂來


function addTS(a: number, b: number): number {
  return a + b;
}

// Argument of type 'string' is not assignable to parameter of type 'number'
console.log(addTS(1, "2"));

差別在哪?

JS 是「我幫你跑看看,至於結果怎樣我不管」

TS 是「欸欸欸~你這樣不對喔,先改好再說」


型別就是契約

假設後端給你的 API 原本回:


{
  "name": "Mike",
  "age": 25
}

結果哪天後端改成:


{
  "fullName": "Mike Yang",
  "age": 25
}

JavaScript(上線才知道壞掉)


function greet(user) {
  return `Hi, ${user.name}!`; // name 不見了,爆了
}

TypeScript(檔案存檔就爆)


type User = { name: string; age: number };

function greet(user: User) {
  return `Hi, ${user.name}!`;
}

// name 改掉的瞬間,全專案會幫你找出壞掉的地方


先別怕,TS 可以慢慢來

  • 新功能用 .ts 開始寫
  • 重要資料加型別(例如 API 回傳值)
  • 慢慢把舊 JS 換掉

我這系列的目標就是讓你 每天花 15 分鐘左右,邊玩邊學,最後直接能在專案用起來。


下一篇
Day 2|打造 TypeScript 開發環境:tsconfig 跟我想的不一樣!
系列文
我與型別的 30 天約定:TypeScript 入坑實錄3
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言