---
# System prepended metadata

title: 2024 TS 直播班每日任務

---

# 2024 TS 直播班每日任務

##  Day 6 - 列舉型別（Enum）

### 題目

請觀察以下情境，並推斷他適合哪種型別格式：

1. 情境：你需要儲存不同的使用者角色，如「管理員」、「使用者」和「訪客」。這些角色是固定的且有特定的名稱。
✅A. 列舉 (Enum)
B. 元組 (Tuple)
C. 陣列 (Array)
2. 情境：你正在開發一個函式，需要回傳一個包含經度和緯度的地理座標。
A. 列舉 (Enum)
✅B. 元組 (Tuple)
C. 陣列 (Array)
3. 情境：你需要一個儲存全台灣各家庭的數據資料，例如每個家庭的總年收入。
A. 列舉 (Enum)
B. 元組 (Tuple)
✅ C. 陣列 (Array)
4. 情境：你需要表示一週的七天，每天都有一個特定的名稱。
✅ A. 列舉 (Enum)
B. 元組 (Tuple)
C. 陣列 (Array)
5. 情境：你需要追蹤一個電子商務網站上的產品類別，這些類別已經固定，不會隨時間而更改。
✅A. 列舉 (Enum)
B. 元組 (Tuple)
C. 陣列 (Array)

### 開發題

* **題目標題: 設計一個訂單處理系統**
*  情境描述:
    你正在開發一個電子商務系統，需要處理不同階段的訂單。
    為了更好地追蹤和管理訂單，你決定使用 TypeScript 的 **`enum`** 來表示訂單的各個處理階段。
*  任務:
    1. 定義一個名為 **`OrderStatus`** 的 **`enum`**，其中包括以下狀態：待處理（Pending）、運送中（Shipping）、已送達（Delivered）、已取消（Cancelled）。
    2. 建立一個函式，名稱為`changeOrderStatus`，藉此更新訂單狀態
        - 參數：訂單 ID (**`orderId`**) 和新的訂單狀態 (**`newStatus`**)。
        - 回傳：無（僅在控制台印出更新訊息）。

#### 程式碼:

```typescript= !
enum OrderStatus {
    Pending,
    Shipping,
    Delivered,
    Cancelled
}

// 更新訂單狀態
function updateOrderStatus(orderId: number, newStatus: OrderStatus) {
    console.log(`訂單 ${orderId} 的狀態已更新為：${OrderStatus[newStatus]}`);
}

// 範例使用
let orderId = 123; // 假設的訂單 ID
updateOrderStatus(orderId, OrderStatus.Pending);
// OrderStatus.Pendind是帶入0，對應到enum的值是Pending
updateOrderStatus(orderId, OrderStatus.Shipping);
updateOrderStatus(orderId, OrderStatus.Delivered);
```

---

## Day 5 - 元組與聯合型別

### 單選題

1. **題目一：下列哪個選項正確描述了元組？**
     - A. 元組是一種無序的資料結構
     - ✅ B. 元組可以包含不同類型的值
     - C. 元組的長度可以動態調整
     - D. 元組的元素可以被修改


2. **題目二：以下哪個描述最準確地表示 TypeScript 中的「聯合型別」？**

     - ✅ A. 聯合型別是一種將多個不同型別組合成一個型別的方式。
     - B. 聯合型別是一種用於表示陣列的型別。
     - C. 聯合型別是一種用於表示物件的型別。


3. **題目三：當我們想要表示多個不同型別的選項，並將它們合併成一個型別，我們應該使用什麼 TypeScript 功能？**

    * A. 元組
    * ✅ B. 聯合型別



4. **題目四：以下哪個 TypeScript 寫法表示一個元組（包含姓名和年齡）？**

    ✅ A

    ```tsx
    const person: [string, number] = ["John", 30];// A
    const person: [string] = ["John", 30];// B
    const person: { name: string; age: number } = { name: "John", age: 30 };// C
    const person: (string | number)[] = ["John", 30];// D 
    ```


5. **題目五：以下哪個 TypeScript 寫法表示一個聯合型別（可以是字串或數字）？**

    ✅ B

    ```tsx
    const value: string = "Hello"; // A
    const value: string | number = "Hello"; //B
    const value: (string | number)[] = ["Hello", 42]; //C
    const value: { text: string } = { text: "Hello" }; //D
    ```



6. **題目六：以下哪個 TypeScript 寫法表示一個函式參數的型別註釋（接受兩個數字並返回它們的和）？**

    PS:1/21 更新，調整為「函式參數」
    ✅ A

    ```tsx
    const add = (a: number, b: number): number => a + b;//A

    function add(a: number, b: number) { //B
      return a + b;
    }

    const add: (a: number, b: number) => number = (a, b) => a + b; //C
    const add = (a, b) => a + b; //D
    ```

## 開發題
> 建議先看完 **[TypeScript 常用型別](https://courses.hexschool.com/courses/typescript-30/lectures/50717961)** 章節，再來挑戰此題目


請將以下待辦事項 JavaScript 程式碼，改為 TypeScript 版本，可隨意調整程式邏輯，只要確保有完成以下四項即可：
1. 可以新增待辦
2. 可以編輯待辦
3. 可以刪除待辦
4. 點擊待辦時，可以有劃線表示做完


---

## Day 4 - 陣列與物件
### **單選題**

1. **在 TypeScript 中，以下哪個是正確宣告數字陣列的方式？**
    - A. **`let numbers = [1, 2, 3];`**
    - ✅ B. **`let numbers: number[] = [1, 2, 3];`**
    - C. **`let numbers: Array = [1, 2, 3];`**
    - D. **`let numbers: [number] = [1, 2, 3];`**
2. **以下哪種方法可以用來向 TypeScript 陣列中添加新元素？**
    - A. **`append()`**
    - ✅ B. **`push()`**
    - C. **`add()`**
    - D. **`insert()`**
3. **如何宣告一個包含字串和數字的 TypeScript 陣列？**
    - A. **`let values: [string, number] = ["Hello", 5];`**
    - ✅ B. **`let values: (string | number)[] = ["Hello", 5];`**
    - C. **`let values: Array<string, number> = ["Hello", 5];`**
    - D. **`let values: string & number[] = ["Hello", 5];`**
4. **在 TypeScript 中，`pop()` 方法的用途是什麼？**
    - A. 刪除陣列的第一個元素。
    - ✅ B. 刪除陣列的最後一個元素。
    - C. 在陣列的開頭添加一個元素。
    - D. 在陣列的末尾添加一個元素。
5. **以下哪個是 TypeScript 中宣告多維陣列的正確方式？**
    - ✅ A. **`let matrix: number[][] = [[1, 2], [3, 4]];`**
    - B. **`let matrix: Array<number> = [[1, 2], [3, 4]];`**
    - C. **`let matrix: number[] = [[1, 2], [3, 4]];`**
    - D. **`let matrix: [number, number][] = [[1, 2], [3, 4]];`**

--- 
### **開發題目**

1. 寫一個  `calculateSum` 函式，該函式接受一個數字陣列作為參數並回傳它們的總和
    ```typescript= !
    // 方法一：reduce
    function calculateSuㄩ(arr: number[]){
        return arr.reduce((x,y) => x + y ,0)
    }

    // 方法二：forEach
    function calculateSum(arr: number[]){
        let sum = 0;

         arr.forEach((item) => {
            sum += item;
        });

        return sum;
    }

    // 方法三：傳統for迴圈
    function calculateSum(arr: number[]):number {
        let sum = 0;

        for(let i = 0; i < arr.length; i++){
            sum += arr[i];
        }
        return sum;
    }
    ```
3. 寫一個 `findMaxValue` 函式，參數可以接受包含不同數字的數字陣列，並 return 找出其中的最大值。
    ```typewscript= !
    function findMaxValue(num: number[]) :number{
        return Math.max(...numbers);
    }
    ```
5. 寫一個 `mergeArrays` 函式， 來合併兩個相同型別的字串陣列，並回傳一個包含兩個陣列所有元素的新陣列。
    ```typescript= !
    function mergeArrays(arr1: string[], arr2: string[]):string[] {
        return [...arr1, ...arr2]
    }
    ```