---
tags: TypeScript 新手指南
---

# #2 聯合型別、物件的型別–介面、陣列的型別

> 討論日期: 2021/11/09
> 討論範圍: 新手指南：聯合型別、物件的型別--介面、陣列的型別

## 筆記分享

- https://docs.google.com/presentation/d/11D5nmE7ed2Y9tt725UMZMtkPzDBIL49B/edit?usp=sharing&ouid=106988658706184798067&rtpof=true&sd=true
- https://dazedbear.notion.site/2-794b391eeefe43f6ad4b3f0f15e60f08

## 待解決問題

- [discriminated-unions](https://basarat.gitbook.io/typescript/type-system/discriminated-unions)

## 線上討論紀錄

### TypeScript / JavaScript 學習資源

- [JavaScript 30](https://javascript30.com/) ([github](https://github.com/wesbos/JavaScript30))
- Typescript 30
- [MOPCON 2021 - 用 Type 建立 Type：一起來當個 TypeScript 的型別魔術師](https://github.com/pjchender/mopcon-2021)
- [Google TypeScript Style Guide](https://google.github.io/styleguide/tsguide.html)
- [PJCHENder.dev: Typescript](https://pjchender.dev/typescript/guide-getting-started)
- [前端精神時光屋](https://challenge.thef2e.com/)

### 刷題學習資源

- [[ALG101] 先別急著寫 leetcode](https://lidemy.com/courses/793973/lectures/14422531)
- [LeetCode解題思維與演算法面試準備](https://www.youtube.com/watch?v=CgFlpuA-sv0&ab_channel=ALPHACampSchool)
- [CodeWars](https://www.codewars.com): 刷題 service，[CodeKata](http://codekata.com/)
- [HackerRank](https://www.hackerrank.com/)
- [Codility](https://www.codility.com/)

### 其他學習資源

- [程式前沿](https://codertw.com/)
- [前後端都該理解的計算機概論](https://www.youtube.com/watch?v=QuCu4iDpPTU&ab_channel=%E5%85%AD%E8%A7%92%E5%AD%B8%E9%99%A2)
- [Behavioral Design Patterns](https://refactoring.guru/design-patterns/behavioral-patterns)

### 任意屬性

interface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}

// [propName: string] 負責 property，也就是 [mykey] 的部分，這些 key 通常會是字串
// :any 負責 value 的部分
const mykey = 'age';
const person = {
    [mykey]: 10
}

### 讓 TypeScript 介面定義更容易被理解

光寫介面定義有時候後人仍會搞不懂，適時搭配 comment 解釋會更容易懂

- [jshint](https://jshint.com/)
- [jsdoc](https://jsdoc.app/)

### 前端何時會用到 Design Pattern

開發比較底層、可擴充性高的 library 就會大量使用到

### 前端開發動畫、特效比較多的網頁，會用到 React 嗎?

- 有些特效可以用 CSS 做掉，例如 CSS animation、CSS transit
- React 比較適合開發功能性的 UI feature，例如：drag & drop、彈跳視窗 modal，厲害的特效動畫還是需要搭配專門的 library (ex: [PixiJS](https://pixijs.com/), [GreenSock JS](https://greensock.com/gsap/), [Three.js](https://threejs.org/) ...)

### 介面的用途

1. 對 class 的部分行為抽象 (see: [類別實現介面](https://willh.gitbook.io/typescript-tutorial/advanced/class-and-interfaces#類別實現介面))

<?php
interface FallbackHandler {
    public function displayHtmlFallback();
}
class ModuleFallbackHandler implements FallbackHandler {
    public $moduleId = '';
    public $html = '';
    public function __construct($moduleId = '') {
        $this->moduleId = $moduleId;
        $this->html = "<p>This is fallback content for module: $moduleId</p>";
    }
    public function displayHtmlFallback() {
        echo $this->html;
    }
}

$headerFallback = new ModuleFallbackHandler('header');
$header->displayHtmlFallback();

interface FallbackHandler {
    displayHtmlFallback();
}
class ModuleFallbackHandler implements FallbackHandler {
    moduleId: string = '';
    html: string = '';
    constructor(moduleId = '') {
        this.moduleId = moduleId;
        this.html = `<p>This is fallback content for module: ${this.moduleId}</p>`;
    }
    displayHtmlFallback() {
        document.body.innerHTML = this.html;
    }
}

const headerFallback = new ModuleFallbackHandler('header');
headerFallback.displayHtmlFallback();

2. 物件的形狀（Shape）進行描述

interface IPerson {
    name: string;
    age: number;
}
let tom: IPerson = {
    name: 'Tom',
    age: 25
};

### Any vs. Unknown

遇到不知道 API data 內容是什麼但又要 bypass 掉 TypeScript 檢查，可以用 `unknown` 取代 `any`。

interface APIData {
    [propName: string]: any;
}

interface APIData {
    [propName: string]: unknown;
}

### 聯合型別的迷思

僅貼上補充資料，內容還要再消化一下

[discriminated-unions](https://basarat.gitbook.io/typescript/type-system/discriminated-unions)