1. ES6 解構式語法基礎、進行型別註記

解構式語法

在 ES6 中，解構（Destructuring）是一種簡單快速地提取陣列或物件中數值的方式，並將它們賦值到變數。這可以將賦值和結構分開，使程式碼更加簡潔和易讀。

範例

陣列解構

let [first, second, third] = [1, 2, 3];
console.log(first);  // 1
console.log(second); // 2
console.log(third);  // 3

物件解構

let { name, age } = { name: 'John', age: 30 };
console.log(name); // John
console.log(age);  // 30

解構式的同時做型別註記

在 TypeScript 中，當我們進行解構時，可以同時進行型別註記，以確保變數具有正確的型別。

範例:

let { name, age }: { name: string, age: number } = { name: 'John', age: 30 };

在上述範例中，我們不僅使用 ES6 的物件解構，還宣告了 name 是一個字串，而 age 是一個數字。

小結:

ES6 的解構式語法提供了一種有效的方式來提取和賦值變數。當與 TypeScript 的型別系統結合使用時，它提供了更強大和安全的賦值方法，避免型別錯誤。

2. ES7 匯集、展開操作符 (rest-spread operator) 結合型別系統

ES7 的匯集、展開操作符

匯集 (Rest) 和展開 (Spread) 操作符是 ES7 中的新功能，允許我們更容易地操作物件和陣列。

展開操作符 ...

將一個陣列轉換成單獨的元素，或將一個物件的所有屬性資料轉換為新物件的屬性資料。

範例:

陣列展開

let array1 = [1, 2, 3];
let array2 = [...array1, 4, 5];
console.log(array2); // [1, 2, 3, 4, 5]

物件展開

let obj1 = { name: 'John', age: 30 };
let obj2 = { ...obj1, gender: 'male' };
console.log(obj2); // { name: 'John', age: 30, gender: 'male' }

匯集操作符 ...

將多個元素收集到一個陣列，或將多個屬性收集到一個物件。

範例:

陣列匯集

function getNumbers(...args) {
    console.log(args);
}
getNumbers(1, 2, 3, 4); // [1, 2, 3, 4]

物件匯集

let { name, ...rest } = { name: 'John', age: 30, gender: 'male' };
console.log(name);  // John
console.log(rest);  // { age: 30, gender: 'male' }

匯集、展開操作符做型別結合

在 TypeScript 中使用匯集和展開操作符時，也可以利用型別系統來確保資料的一致性。

範例:

function sum(...numbers: number[]): number {
    return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3));  // 6

在上述範例中，...numbers: number[] 確保只能傳遞數字型別的參數。

小結:

匯集和展開操作符提供了一種方便、簡潔的方式來操作陣列和物件。結合 TypeScript 的型別系統。

3.ES6 的 Set 和 Map 資料結構，基礎使用、結合泛用類別

ES6 中的 Set 和 Map

在 ECMAScript 6 中，Set 和 Map 是新增的資料結構，它們分別提供了唯一值的集合以及鍵值對的集合。

Set

Set 是一個包含不重複值的集合。它的主要特點是值的唯一性。

範例:

let uniqueNumbers = new Set();

uniqueNumbers.add(1);
uniqueNumbers.add(2);
uniqueNumbers.add(2); // 這不會新增，因為 2 已經存在。

console.log(uniqueNumbers); // Set { 1, 2 }

Map

Map 是一個鍵值對的集合。與物件不同，Map 的鍵可以是任何資料型別，包括物件。

範例:

let userMap = new Map();

let john = { name: 'John' };
userMap.set(john, 123);

console.log(userMap.get(john)); // 123

泛用 Set 和 Map

在 TypeScript 中，可以給 Set 和 Map 添加型別，確保資料的一致性。

範例:

let numberSet: Set<number> = new Set();

numberSet.add(1);
numberSet.add(2);

let userMap: Map<object, number> = new Map();

let john = { name: 'John' };
userMap.set(john, 123);

小結:

Set 和 Map 為 TypeScript 提供了強大且靈活的資料結構。當結合 TypeScript 的型別系統時，它們可以確保資料的安全性和一致性，進一步增強程式碼的品質和可維護性。

4. ES10 非強制串接操作符（Optional Chaining Operator）

介紹

在 JavaScript 中，想要訪問物件的多層巢狀屬性時，可能會遇到某些屬性不存在的情況，這時直接找可能會導致錯誤。ES10 引入了非強制串接操作符（Optional Chaining Operator）?. 以更簡單、更安全的方式訪問巢狀物件的資料屬性。

基本用法

非強制串接操作符允許在不確定屬性是否存在的情況下，讀取物件的屬性。

範例:

const user = {
    profile: {
        name: 'John',
        age: 30
    }
};

console.log(user.profile?.name); // John
console.log(user.profile?.address?.city); // undefined，不會拋出錯誤，因為使用了?.

非強制串接操作符（Optional Chaining Operator）中的 TypeScript

在 TypeScript 3.7+ 版本同樣支持此功能，並允許結合其強型別系統進行使用。

interface User {
    profile?: {
        name?: string;
        age?: number;
    };
}

const user: User = {
    profile: {
        name: 'John'
    }
};

console.log(user.profile?.name); // John
console.log(user.profile?.age); // undefined

小結

非強制串接操作符是 JavaScript（和 TypeScript）中的一個強大新功能，讓讀取數值更安全地，避免可能不存在的屬性，減少了潛在的錯誤。對於深度巢狀的物件，這是一個極佳的工具。

5. ES10 空值結合操作符（Nullish Coalescing Operator）

介紹

ES10 引入了空值結合操作符 ??，這是一個邏輯操作符，當左側的操作數為 null 或 undefined 時，返回右側的操作數；否則返回左側的操作數。這使得開發者可以簡單地指定預設值。

基本用法

在 JavaScript 中，我們經常使用 || 來指定預設值，但當操作數的值為 0、false 或空字符串時，它可能會導致不預期的結果。空值結合操作符只考慮 null 或 undefined，所以它避免了這些問題。

範例:

const count = 0;
const displayCount = count || "No count"; // "No count"
const correctDisplayCount = count ?? "No count"; // 0

空值結合操作符（Nullish Coalescing Operator）在 TypeScript 中的用途

在 TypeScript 中，空值結合操作符與其強型別系統相結合，使得開發者可以更清晰地定義預期的型別和預設值，同時避免不預期的型別轉換。

interface Config {
    timeout?: number;
    title?: string;
}

function setup(config: Config) {
    const timeout = config.timeout ?? 3000; // 如果 timeout 未提供或為 null / undefined，則默認為3000
    const title = config.title ?? "Default title";
}

setup({ timeout: 0 }); // 使用0，而不是3000

小結

空值結合操作符提供了一種更安全、更直觀的方式來處理可能的 null 或 undefined 值。它不但減少了潛在的錯誤，還改善了如果要寫的話會額外增加的程式碼行數。