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