# 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] } ```