TypeScript 的機制和功能是建立在 JavaScript 的基礎之上，它通過編譯過程將 TypeScript 代碼轉換為 JavaScript。因此，掌握 ES6 語法變得尤為重要，接著讓我們來了解常用的 ES6 語法。P.S：範例展示 ES6 的同時，會融入 TypeScript 輔助功能。

• let、const
• 箭頭函式（⇒）
• 展開運算子（…）
• 解構賦值
• 樣板字面值

let 和 const

let

稱為「變數」，可重新賦值，與 var 類似，然而其關鍵區別在於作用域不同。

let age: number;
age = 30; // 通過
age = '肉鬆'; // TypeScript 報錯，類型 'string' 不可指派給類型 'number'

const

稱為「常數」，不可重新賦值。

const text: string = '肉鬆';
text = '傑尼龜'; // 因為 'text' 為常數，所以無法指派至 'text'

作用域

讓我們透過範例說明 let 與 var 作用域的差異：

// var 範例
function exampleWithVar() {
  if (true) {
    var test = '我是 var 變數';
  }
  console.log(test); 
  // 我是 var 變數
  // var 作用域是整個函式
}

exampleWithVar();

// let 範例
function exampleWithLet() {
  if (true) {
    let test = '我是 let 變數';
  }
  console.log(test); 
  // 報錯
  // let 作用域只包含在大括號 {} 內，而不是整個函式
}

exampleWithLet();

箭頭函式

箭頭函式具有簡潔的語法，並且通常用於定義回調函式或簡單的函式。

// 一般函式
function add(a: number, b: number): number {
  return a + b;
}

console.log(add(3, 4)); // 7

// 箭頭函式
const add = (a: number, b: number): number => {
  return a + b;
};

console.log(add(3, 4)); // 7

// 只有一個表達式，可以省略大括號並刪除 return，因為箭頭函式會自動返回該表達式的結果
const add = (a: number, b: number): number => a + b;

console.log(add(3, 4)); // 7

展開運算子

展開運算子（…）用於將陣列或物件的元素展開成獨立的值，或者將多個值合併到一個陣列或物件中。

• 展開陣列元素：

const arr1: number[] = [1, 2, 3];
const arr2: number[] = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]

• 合併陣列：

const arr1: number[] = [1, 2, 3];
const arr2: number[] = [4, 5];
const combinedArr: number[] = [...arr1, ...arr2];
console.log(combinedArr); // [1, 2, 3, 4, 5]

• 展開物件屬性：

const person: { name: string; age: number } = {
  name: '肉鬆',
  age: 30,
};

const copiedPerson: { name: string; age: number; gender: string } = {
  ...person,
  gender: 'male',
};

console.log(person); // {name: '肉鬆', age: 30}
console.log(copiedPerson); // {name: '肉鬆', age: 30, gender: 'male'}

解構賦值

允許我們從陣列或物件中提取值並賦值給變數。

陣列

一般陣列取值：

const hobbies: string[] = ['Sport', 'Cooking'];
const hobby1 = hobbies[0];
const hobby2 = hobbies[1];
console.log(hobby1, hobby2); // Sport Cooking

陣列解構取值：

const hobbies: string[] = ['Sport', 'Cooking'];
const [hobby1, hobby2] = hobbies;
console.log(hobby1, hobby2); // Sport Cooking

物件

一般物件取值：

const person: {
  firstName: string;
  lastName: string;
  age: number;
} = {
  firstName: 'Chen',
  lastName: '肉鬆',
  age: 30,
};

console.log(person.firstName); // Chen
console.log(person.lastName); // 肉鬆
console.log(person.age); // 30

物件解構取值：

const person: {
  firstName: string;
  lastName: string;
  age: number;
} = {
  firstName: 'Chen',
  lastName: '肉鬆',
  age: 30,
};

const { firstName, lastName, age } = person;
console.log(firstName); // Chen
console.log(lastName); // 肉鬆
console.log(age); // 30

// 自定義變數名稱
const {
  firstName: personFirstName,
  lastName: personLastName,
  age: personAge,
} = person;
console.log(personFirstName); // 肉鬆
console.log(personLastName); // Chen
console.log(personAge); // 30

樣板字面值

樣板字面值讓我們擺脫了繁瑣的字串相加，它使用反引號（``）插入變數和表達式到字串中，讓字串插值更加簡單和易讀。

一般字串相加：

const combinedMessage = '我是' + person.firstName + person.lastName + '，' + '今年' + person.age + '歲';

console.log(combinedMessage); // 我是Chen肉鬆，今年30歲

樣板字面值相加：

const combinedMessage = `我是${person.firstName}${person.lastName}，今年${person.age}歲`;

console.log(combinedMessage); // 我是Chen肉鬆，今年30歲

本日重點

1. ES6 是 JavaScript 的一個重要版本，引入了新的語法和功能，使程式碼更簡潔、現代化且易於維護。
2. TypeScript 的機制和功能是建立在 JavaScript 的基礎之上，因此掌握 JavaScript 與 ES6 是更為重要的前提。

參考

• JavaScript - ES6