TS 自學筆記（一）

本文寫於 2020 年 5 月 6 日

日常廢話兩句

有幾天沒有更新了，最近學的比較亂，休息了兩天感覺好一些了。這兩天玩了幾個設計軟體，過幾天也寫篇文章分享分享。

為啥要學 TS？

進入正題哈，經常寫 JS 的人會特別多的碰到一個 bug：xxxx is not a function之類的。

這是為什麼呢？

其實就是我們用了一些不屬於它的方法。

比如說我們有一個const a = 250，然後我們讓他a.filter(()=>{})。

有人可能會說，那明明是一個 number 類型，我怎麼可能給他 filter 呢？

我之前就犯過這個錯誤，我想讓一個數組等於另一個被 push 一個新元素數組：

let newArr = arr.push('hello')
newArr.filter(() => {})

要知道，arr.push他的返回值是新的數組長度！

我讓一個 number 類型去使用數組方法，自然是會報錯的。

好吧我知道這樣似乎非常愚蠢，但是總而言之，在日常寫 JS 的報錯中，有大把大把的報錯是因為這種完全可以避免掉的問題。

如果是 Java，他會在編輯器內就給你劃紅線，不會等到你運行了，再去告訴你。

這就是動態語言的毛病。

關於代碼提示

不僅如此，我們是否會在寫代碼的時候煩心於代碼提示呢？

比如我在某個 class 內部聲明瞭一些變數，可是當我在其他地方進行實力化的時候，統統都沒有提示！

我必須要翻到這個 class 的文件，找到那些變數再確認一番。

而 TS 的介面概念，可以幫助我們非常完美的解決問題！

所以我們需要學習 TypeScript。

據說用了 TS，能有效減少 80%的 Bug（笑）。

但不管這是不是真的，從各個大框架對於 TS 的青睞程度來看，未來幾年內，TS 必然會是絕對的熱點之一！

畢竟，現在已經不只是：

能被 JS 改寫的終將被 JS 改寫

而是：

能被 TS 改寫的，終將被 TS 改寫

01 變數類型

JS 是弱類型語言，TS 卻不是。

TS 擁有這些類型：

1. undefined
2. null
3. boolean
4. number
5. string
6. object
7. array

----⬆️JS 有的，⬇️JS 沒有的----

8. tuple
9. enum
10. any
11. void
12. never

number、string、boolean 沒有什麼特別好說的，和 JS 沒什麼區別，我來寫幾個我覺得比較重要的。

數組的聲明

let list: number[] = [1, 2, 3]
let list_b: Array<number> = [1, 2, 3]

第一種方法不難理解，就是生命一個 number 數組。

第二種方法叫做數組泛型，即Array<元素類型>。

什麼叫做泛型呢？

如果我們有一個函數：

function identity(arg: number): number {
  return arg
}

那這個時候，傳入的變數就必須是數字。

考慮到可復用性的問題，我們可以使用泛型。

function identity<T>(arg: T): T {
  return arg
}

identity 函數 叫做泛型（註意，T 不是泛型！），因為它可以適用於多個類型。

T 是類型變數，它是一種特殊的變數，只用於表示類型而不是值。

它可以幫助我們捕獲用戶傳入的類型，讓我們可以對這個類型加以利用。

其實之前的情況，我們可以通過 any 來實現，但是 any 就會讓我們丟失 T 這一信息。

在命名變數的時候有一個小坑，變數名不能命名為name，因為會與 DOM 中的全局 window 對象下的 name 屬性出現重名。

enum 是成組常量的好用法！

enum Hello {
  teacher: "老師好",
  classmate: "同學好",
  parents: "爸爸好",
  girlfriend: "劉好"
}

一般情況，枚舉類型會自動賦給自己常量值：

enum Hello {
  teacher, // 0
  classmates, // 1
  parents, // 2
  girlfriend // 3
}

我們也可以從中間打斷這個賦值：

enum Hello {
  teacher, // 0
  classmates, // 1
  parents = 5, // 5
  girlfriend // 6
}

接下來會進行順延。

從來沒有的 Never 值

never 類型表示的是那些永不存在的值的類型，聽起來就像個悖論——我如何列舉一個不存在的值？

其實never 類型可以是拋出的異常，或根本就不會有返回值的函數的返回值類型。

function error(message: string): never {
  throw new Error(message)
}

function fail() {
  return error('Something failed')
}

function infiniteLoop(): never {
  while (true) {}
}

總體來講大同小異，TS 補充了一些在別的語言中有過的常見數據類型，相信這一塊對於 JS 開發者來說，不會是什麼難題。

唯一的難題就是習慣，可不能老是使用 any 類型！

（未完待續）