---
tags: typescript
---

# Typescript WTF - omg facker what is this

Typescript 是 Javascript 的型別系統，簡單來說，就是將你的變數加上 Type。

你可能聽過這個酷酷的新東西，也知道很多開源專案和大企業都在使用，於是迫不及待的將你的 js 檔，一次性轉換成 ts，結果 :



滿面的紅字讓你無從改起，只能默默的又將 .ts 改回 .js，這可能是大多數人看到 TypeScript 的第一印象 : 麻煩、耗時、挫折。

## Why TypeScript

乍看之下是如此，但 TypeScipt 其實一點也不困難，它只是在 JavaScript 的基礎上新增了很多很棒的 Feature，能夠讓你提前發現很多沒有預期到的錯誤，大大的減少維護成本和造口業導致的陰德值降低。

這裡先暫停一下，試想一個狀況，你從客服那邊拿到了一個問題回報，看著支離破碎的言語形容和用手機拍攝的錯誤訊息，只好停下手邊工作，開始追了起來


找了半天的你卻發現，原來只是某個參數少打了 s，某個判斷值是 1 不是 ‘1’，原來這個 function 會將所有的 object 轉成 array，諸如此類的小錯誤一再發生。

這些錯誤都需要**編譯過才知道**，更有可能，因為在測試的時候沒有踩到，一個至關重要的 feature 就伴隨著好幾個 bug 出去了，過了幾周之後這些問題就隨著業力引爆迴旋鏢飛回來，打的你的臉啪啪作響。

而 TypeScript **可以幫助提早發現這些錯誤**。

## What TypeScript do

就如一開始所說的，TypeScript 只是在 JavaScript 的基礎上加上了**型別系統**，舉例來說像這樣:

let title: string

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

let person = {
	name: 'Chris',
	age: 24
}

例如 plus 只能丟 `number`，如果丟了 `number` 以外的型別或是參數少了 1 個，typescript 都會馬上發出警告

plus(123) //error TS2554: Expected 2 arguments, but got 1.

plus('') // error TS2354 this syntax requires an number not a string

而且 typescript 配合大多數的 IDE ( 例如: vscode )，都會搭配 Autocomplete 除了再也不會打錯字以外，還可以快速寫出物件的屬性 / 或 型別的原生方法:


雖然看起來是很小很小的事，但就光這幾點就能迴避掉很多不該犯的錯誤。

除了這些以外，TypeScript 還會自動找出潛藏的錯誤，或是沒有補清的邏輯，並拋出警訊，例如:

**暫時性死區 ( Temporal Dead Zone)**

let a : string
let b = a  // Variable 'a' is used before being assigned
a = 'hello'

**型別推論**

let info = {
    name: 'Chis',
    age: 24,
  };

info.age = '21' // type error string can't assign to number
info.addr = 'addr' // 類型 '{ name: string; age: number; }' 沒有屬性 'addr'。ts(2339)

甚至，不管你是採用怎樣的 design pattern，都有 typescript 適合的地方，例如: 拆的極致細，超級 SOLID 化的專案，一個動作貫穿好幾個 function，到最後都忘記傳進來的參數長怎樣，藉由事先定義好型別，就不用追的手忙腳亂:

// in XXX/type
type xxxPayload = {
	id: string,
	sign: symbol,
	datetime: number,
	// ...
}

type response = {
	code: string,
	dara: { [string]:any }
}

// in view component
const data = xxxModule.onHandler(id)

// in XXXmodule.ts
class xxxModule{
	function onHandler(id: string){
		let payload = {
			id:id
			// ...
		}
		xxxService.report(payload: xxxPayload)
	}
}

// in XXXservice.ts
class xxxService{
	function report(payload :xxxPayload): response  {
		// 通常這時候只要 IDE 有配合 滑鼠滑過去上面變數 就會看到這個物件實際上是甚麼
		// 但沒有的話 至少你也可以確保傳進來的一定是你預期的 (或是你換個 IDE 吧 = = 

		// ...
		return reponseData
	}
}

# Source

[https://www.youtube.com/watch?v=zQnBQ4tB3ZA](https://www.youtube.com/watch?v=zQnBQ4tB3ZA)

[https://www.youtube.com/watch?v=i43W0XSiuIE](https://www.youtube.com/watch?v=i43W0XSiuIE)

[https://ithelp.ithome.com.tw/articles/10214714](https://ithelp.ithome.com.tw/articles/10214714)