# 用 Type 建立 Type：一起來當個 TypeScript 的型別魔術師 - PJCHENder

{%hackmd CtA3qhz_RMS-TdMLw6dyqw %}

:::success
+ [投影片連結](https://docs.google.com/presentation/d/1jTnrOyCVbdWbbvx8EEY8r3Ex6DhXyqM-V3_P16HIvI8/edit?usp=sharing)
+ [Github 連結](https://github.com/pjchender/mopcon-2021)
+ [議程問卷連結](https://forms.gle/wWWJZDveyC3pGSeN8)
+ [Sli.do 連結](https://app.sli.do/event/pvar92x3)
:::

> 從這開始

## 泛型 `<T>`

使用起來就很像是 JavaScript 的函式，讓開發者可以帶入參數，只是現在的參數是「型別」。

像是函式中的變數，可以根據 `T` 輸入的型態定義自己的客製型態

### 泛型限制（generic constriants）`extends`

extends 可以限制 T 的範圍，讓 T 的宣告限制在某些型態裡面。

### 泛型參數預設值
`<T = number>` 代表未帶入型別時，預設型別是 number。可與`extends` 並用。

## Utility Types

像是呼叫函式一樣，透過這些小工具建立型別。Utility Type 就像 Utiliy Function，只是現在的參數是「型別」。

- NonNullable：過濾掉 `null` 或是 `undefined` 這些型別。

## Basic Type Operators

- keyof：取得物件型別中的 key 作為型別。
- typeof：後面可直接加上物件，透過自動推論來建立型別。經常搭配 `keyof` 使用。

使用情境：keyof typeof 可以搭配物件取得該物件裡面所有的 key 與它的型別。

/**
 * typeof 的使用：後面接的是 JS 的「值」而不是 TS 的型別。
 */
const mopcon = {
  name: 'MOPCON',
  year: 2021,
  isAddToCalendar: true,
  price: 800,
};

type KeysOfConferenceFromTypeOf = keyof typeof mopcon;

- Template Literals：像 JS 一樣在 template 中帶入變數。根據傳入的聯集自動產生新的聯集

## Manipulate Object Types

- Indexed Access Types：取得物件型別中的值的型別

> 建立 Utility Types 的兩步驟
> STEP 1：先透過實際的範例把功能寫成來：取得 Conference 中所有屬性的 Keys。
> STEP 2：把可以變成參數的地方抽出來

## Mapped Types

使用關鍵字 `in` 搭配聯集，可以形成類似迴圈的功能。

- 可以搭配 keyof 關鍵字進行複製
`[P in keyof OtherTypes]: OtherTypes[P]`
- 一次修改所有物件型別的 value
- 一次修改所有物件型別的 key（搭配 template literal）
- 使用 Mapped Type 挑出物件型別中的特定屬性（官方提供的 `Pick<T, K>`

## Conditional Types

type A = ...

- X extends Y ? T : F
- 若 X 是 Y 的子集合，型別 A 就是 T，反之為 F
- never extends Y ? T : F
- 因為 never 不是任何型態的子集合，因此型別 A 必定為 F

## Infer

- 只能在 conditional type 中的 extends 後被使用
- 推導出來的型別 R 只能用在符合 True 的條件使用

## Recursion

- Function 裡面自己呼叫自己

###### tags: `MOPCON 2021`, `TypeScript`