---
GA: G-7BSJTG7RYN
---

在 [<Day00：JavaScript 與 TypeScript>](https://hackmd.io/@elzuoc/HJ9EDPv1n) 我們有提過，TypeScript 是 JavaScript 的 Superset，因此有許多的型別源自於 JS。

如本系列文所述，若跑過 JS30，應該對 JS 有一定的熟悉度，那我們便會發現在 `原始型別` 中，只需要多認識一個型別即可。

### 存在於 JavaScript 的型別
- `number`, `string`, `boolean`：較常用來定義的型別。
- `undefined`, `null`：較常使用於判斷當前變數狀態。
- `symbol(ES6)`：較少使用，不同於 `number` 這類定義在變數之後的方式，必須倚靠 `Symbol()` 建構式產生 `symbol` 型別的資料。

#### 定義方式

let age: number = 18;
let notANum: number = NaN;
let infinityNum: number = Infinity;

let name: string = 'connie';
let tempLiteral: string = `My name is ${name}`;

let isExist: boolean = false;

let symbolA = Symbol("amazing");
let symbolB = Symbol("amazing");
symbolA === symbolB; // false;

function doSomething(x: string | null) {
  if (x === null) {
    // 此處用來判斷變數 x 的傳入狀態
  } else {
    console.log("Hello, " + x.toUpperCase());
  }
}

function liveDangerously(x?: number | null) {
  // No error
  console.log(x!.toFixed());
}

> **補充說明**
> `x!.toFixed()` 使用到 `!` 驚嘆符號，我們稱它為 **非空斷言運算符** （[Non-null assertion operator](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator)），這是 TS 中新的 `Postfix`。
>
> 變數值若**有可能** `undefined` 或 `null`，TS 會跳出警示，通常在正常運作中，保證值不能為 `undefined` 或 `null` 的狀況下，為了避免不必要的警示，會使用這個方法進行處理。
>
> 通常是資料在規劃時，就不接受 `undefined` 或 `null` 的值，才能這麼做。否則比較好的方式，還是使用 `if` 或 `三元運算符` 判斷後再處理變數。

### TypeScript 增加的型別
`void`：用於定義 function 的回傳值，表示 function 不會回傳任何值。

#### 定義方式

function nothing(): void {
    console.log('return nothing');
}

---
### Reference
- [讓TypeScript成為你全端開發的ACE！- Maxwell Huang](https://www.books.com.tw/products/0010859134)
- [讓 TypeScript 成為你全端開發的 ACE！ 系列 - 第 11 屆 iThome 鐵人賽](https://ithelp.ithome.com.tw/users/20120614/ironman/2685)
- [TypeScript Official Site](https://www.typescriptlang.org/docs)
---

> 系列：[`跑完 JS30 就接著認識 TypeScript 入門`](https://hackmd.io/@elzuoc?tags=%5B%22%E8%B7%91%E5%AE%8C+JS30+%E5%B0%B1%E6%8E%A5%E8%91%97%E8%AA%8D%E8%AD%98+TypeScript+%E5%85%A5%E9%96%80%22%5D)
> 上一篇：[Day01：型別註記、型別斷言與型別推論](https://hackmd.io/@elzuoc/H1eItEny2)
> 下一篇：[Day03：型別系統 - 物件型別 Object Types](https://hackmd.io/@elzuoc/SJhyv8612)

###### tags: [`跑完 JS30 就接著認識 TypeScript 入門`](https://hackmd.io/@elzuoc?tags=%5B%22%E8%B7%91%E5%AE%8C+JS30+%E5%B0%B1%E6%8E%A5%E8%91%97%E8%AA%8D%E8%AD%98+TypeScript+%E5%85%A5%E9%96%80%22%5D)

###### Created on ∥ March 14, 2023
###### 文章若有任何錯誤，還請不吝給予留言指正，謝謝大家！