如何開始學習 TypeScript – 初學者指南

JavaScript 是最廣泛使用的網頁開發程式語言。但它缺乏類型檢查支持，這是現代程式語言的一個重要特性。

JavaScript 最初被設計為一種簡單的腳本語言。它的靈活性和缺乏關鍵的 物件導向程式設計 (OOP) 特性為開發人員帶來了一些挑戰：

1. 有限的文檔和自動補全。

2. 無法利用 OOP 概念。

3. 缺乏類型安全，導致運行時錯誤。

4. 重構和維護上的挑戰。

5. 缺乏介面和整合點。

TypeScript 解決了這些問題。它的構建旨在使 JavaScript 成為一種更完善的現代程式語言。它有助於改善開發者體驗，提供許多有用的功能，並改善互操作性。

本文將深入探討 TypeScript 的基本知識。我將教你如何安裝 TS 和設置項目。然後我們將涵蓋一些重要的基本原則。你還會學到 TypeScript 如何編譯成 JavaScript，使其與瀏覽器和 Node.js 環境兼容。

我們將涵蓋的內容：

• 前置條件

• 入門 – 如何安裝 TypeScript

• 如何組織你的 TypeScript 專案

• TypeScript 中的類型工作原理

  • 類型技術

  • TypeScript 中的靜態與動態類型

  • 類型推斷與聯合類型

• 在TypeScript中處理物件、陣列和函數類型

  • TypeScript中的物件類型

  • TypeScript中的陣列類型

  • 如何在TypeScript中使用陣列

  • TypeScript中的函數類型

• 如何在 TypeScript 中創建自定義類型

  • Type 關鍵字

  • TypeScript 介面

  • 何時使用介面

  • 泛型和字面量類型

• 如何在 TypeScript 中合併類型

  • 何時使用每種方法

• 在 TypeScript 中進行打包和轉換

• 使用TypeScript构建更好的代码

先决条件

在深入研究TypeScript之前，重要的是要对某些概念有基础的理解，以确保学习过程更顺利。虽然TypeScript通过静态类型和其他强大功能增强了JavaScript，但它是建立在核心JavaScript原则之上的。以下是您应该了解的内容：

1. JavaScript基础知识

TypeScript是JavaScript的超集，意味着它扩展了JavaScript的功能。要有效地学习TypeScript，您应首先对JavaScript基础知识有扎实的掌握，包括：

• 语法和数据类型：了解如何声明变量（let、const和var）、处理基本类型（字符串、数字、布尔值）以及管理数组和对象。

• 控制流程：熟悉循环（for、while）、条件语句（if-else、switch）以及它们如何控制程序执行。

• 函數: 知道如何定義和調用函數，處理參數，返回值，並理解箭頭函數和閉包等概念。

• 面向對象編程（OOP): 學習創建和操作對象，類，和繼承。TypeScript 的基於類的特性在 JavaScript 的 OOP 模型上有很大的擴展。

• 錯誤處理: 理解如何使用 try-catch 塊來處理運行時錯誤。

2. 基本的 HTML 和 CSS

儘管 TypeScript 是一種與 JavaScript 主要一起使用的語言，但對 HTML 和 CSS 的基本理解是有幫助的，特別是對前端開發人員。這是因為大多數 TypeScript 項目涉及創建或處理 Web 應用程序。

• HTML: 理解如何使用標籤，屬性和元素來結構化網頁。

• CSS: 學習如何使用選取器、屬性和值來設計元素。熟悉像Bootstrap這樣的CSS框架將是一個優勢。

3. 熟悉開發工具

• 一款程式碼編輯器，如具有優秀TypeScript支援和擴充功能的Visual Studio Code。

• Node.js和npm: 了解如何建立開發環境，執行瀏覽器外的JavaScript並使用npm（Node Package Manager）來安裝依賴項。

• 版本控制（Git）: 學習Git的基礎知識，以便在TypeScript專案中追踪變更並有效合作。

入門指南– 如何安裝TypeScript

要開始使用TypeScript，您需要安裝它。這不是一個複雜的過程。安裝了TypeScript後，您可以利用它的功能來創建高質量的解決方案。

您可以通過兩種方式安裝TS：

1. 全局安裝：使您可以從計算機的任何目錄訪問編譯器。要全局安裝TypeScript，請執行以下命令：

npm install -g typescript

該命令利用Node.js包管理器npm。它會全局安裝TypeScript，使該命令在命令行中可用。

2. 本地安裝：在這種情況下，TypeScript僅在特定項目中安裝。此方法確保團隊成員之間的版本兼容性和一致性。要在本地安裝TypeScript，請執行以下命令：

npm install typescript --save-dev

與全局安裝不同，此命令將TypeScript安裝為開發依賴項目。tsc命令僅供項目特定使用，即運行該命令的特定項目。

現在您能夠無縫安裝TypeScript了嗎？希望如此！

如何組織您的TypeScript項目

組織TypeScript項目涉及使用有意義的名稱和目錄結構化其文件，區分關注點，並使用模塊進行封裝和重用。

.ts擴展名表示typeScript文件，其中包含將轉換為JavaScript以進行執行的代碼。

TypeScript 也支持 .d.ts 檔案，也被稱為型定義檔案。這些檔案提供了關於外部 JavaScript 函式庫或模組的類型資訊，有助於更好的類型檢查和程式碼完成，同時提高開發效率。以下是一個良好的 TS 專案結構示例：

my-ts-project/
├── src/ 
│   ├── components/ 
│   │   ├── Button.tsx
│   │   ├── Input.tsx
│   │   └── Modal.tsx
│   ├── services/ 
│   │   ├── api.ts
│   │   └── authService.ts
│   ├── utils/ 
│   │   ├── helpers.ts 
│   │   └── validators.ts
│   ├── models/ 
│   │   ├── User.ts
│   │   └── Product.ts
│   ├── index.tsx 
│   └── styles/ 
│       ├── global.css
│       └── theme.css
├── public/ 
│   ├── index.html
│   └── assets/ 
│       ├── images/
│       └── fonts/
├── tsconfig.json
└── package.json

讓我們來了解一下這裡發生了什麼：

1. src/：這個目錄包含專案的所有原始碼。

   • components/：包含可重複使用的 UI 元件（例如，Button、Input、Modal）。使用 .tsx（TypeScript JSX）讓您可以以型別安全的方式撰寫 JSX。

   • services/：存放與外部 API 互動或處理應用程式邏輯的服務（例如，api.ts 用於 API 呼叫，authService.ts 用於驗證）。

   • utils/：包含常見任務的輔助函式和實用程式類別（例如，helpers.ts 用於日期格式化，validators.ts 用於輸入驗證）。

   • models/：定義 TypeScript 介面或類別以表示資料結構（例如，User.ts、Product.ts）。

   • index.tsx：應用程式的主要入口點。

   • styles/：包含 CSS 或其他樣式檔案。

2. public/: 此目錄包含不會被 TypeScript 處理的靜態資產（例如 HTML、圖片、字型）。

3. tsconfig.json: TypeScript 配置文件，指定編譯器選項。

4. package.json: 專案清單文件，列出依賴項、指令和其他專案元數據。

有關命名規範的快速說明，讓您在這裡了解它們：

• 類名使用 PascalCase（例如，User、Product）。

• 函數名稱和變量名稱使用 camelCase（例如，getUser、firstName）。

• 為檔案和目錄使用有意義且具描述性的名稱。

這種結構促進模組化、可重用性和更好的組織，使你的 TypeScript 專案更容易維護和擴展。

妥善組織你的 TS 專案增強了代碼的可維護性、可讀性和在 TypeScript 開發工作流程中的協作性。

TypeScript 中的類型如何運作

像其他任何類型編程語言一樣，TypeScript 依賴於類型定義，通常稱為 類型。

類型是編程中用來定義變數、方法參數和返回值的數據類型的術語。

類型允許你在開發過程中快速及早捕捉錯誤，這是一種有助於維持更好代碼質量的超能力。

在 TypeScript 中指定類型時，在變數名稱後加上冒號 (:) 和所需的數據類型。這裡有一個例子：

let age: number = 2;

上述變數被宣告為 number 類型。在 TypeScript 中，這意味著它只能儲存數字，並且不能儲存其他任何東西。

類型技術

在 TypeScript 中，數據可以有兩種主要的類型方式：

1. 靜態類型：靜態類型是指在開發過程中明確指定代碼中變數和其他實體的數據類型。TypeScript 編譯器強制執行這些類型定義，有助於及早捕捉與類型相關的錯誤。例如：

let age: number = 25;

在這裡，變數 age 被明確宣告為 number 類型。這確保了它只能被賦值為數字，降低了運行時錯誤的風險。

2. 動態類型：在 TypeScript 中，動態類型是指變數的類型在運行時確定的情況。當變數被賦予 any 類型時，這種情況可能會發生，因為它允許變數持有任何類型的值。TypeScript 不會對涉及 any 類型變數的操作進行類型檢查。

let value: any;
value = 25; // 數字
value = "Hello"; // 字串

雖然 TypeScript 主要是一種靜態類型語言，但在特定情況下，動態類型仍然可以非常有用，例如：

• 使用沒有類型定義的第三方庫。

• 與動態結構數據進行介面（例如，來自具有未知結構的 API 的 JSON 響應）。

• 快速原型開發或在初始開發階段無法獲得類型信息的情況下。

TypeScript 中的靜態 vs. 動態類型

靜態類型在 TypeScript 中顯著更為普遍，因為它是使 TypeScript 與 JavaScript 区别开来的核心特性之一。通過強制執行嚴格的類型檢查，靜態類型增強了代碼的可維護性，減少了錯誤，並提高了開發者的生產力。

動態類型通常保留給需要靈活性的情況或處理無法事先確定結構的數據時。請記住，過度依賴動態類型（例如，過度使用 any 類型）通常是不被鼓勵的，因為這會削弱 TypeScript 靜態類型系統的優勢。

因此，儘管動態類型在某些邊際情況下是有其存在的意義，但靜態類型是 TypeScript 開發中更受偏好且更常用的方法。

類型推斷與聯合類型

類型推斷

類型推斷是 TypeScript 的一個強大特性，允許編譯器根據在初始化期間分配給變量的值自動推斷該變量的類型。簡單來說，TypeScript 會查看您分配給變量的值，並決定它應該是什麼類型，即使您沒有明確聲明該類型。

例如：

typescriptCopyEditlet age = 25; // TypeScript 推斷 'age' 的類型為 'number'
age = "hello"; // 錯誤：類型 'string' 不能分配給類型 'number'

在這個例子中，age 變數由於其初始值 25 被自動推斷為 number。任何嘗試將 age 重新賦值為不同類型的值（例如字串）都會導致類型錯誤。

類型推斷特別有用，因為它減少了對明確類型註解的需求，使你的代碼更乾淨且更易讀。然而，它仍然提供 TypeScript 類型檢查的安全性和可靠性。

何時使用類型推斷：

• 簡單賦值：對於類型從值中明顯可知的簡單賦值，使用類型推斷。

• 預設值：在為變數或函數參數提供預設值時，類型推斷確保正確的類型被應用，而無需手動註解。

• 快速原型開發：在開發的早期階段，類型推斷可以減少樣板代碼，同時仍然強制類型安全。

聯合類型

聯合類型允許一個變數持有多種型別的值。它們的定義方法是在類型之間放置管道符號 (|)。這個特性在變數在其生命週期中可能合法地擁有多於一種型別時特別有用。

例如：

typescriptCopyEditlet numOrString: number | string; // 'numOrString' 可以持有數字或字符串
numOrString = 25; // 有效
numOrString = "hello"; // 有效
numOrString = true; // 錯誤：類型 'boolean' 不能賦值給類型 'number | string'

你甚至可以定義具有多於兩個可能型別的聯合類型：

typescriptCopyEditlet multiType: number | string | boolean;
multiType = 42; // 有效
multiType = "TypeScript"; // 有效
multiType = false; // 有效

何時使用聯合類型：

• 靈活的函數參數: 當函數可以接受多種類型的輸入。

    typescriptCopyEditfunction printValue(value: string | number) {
      console.log(value);
    }
  

• 處理各種不同的數據結構: 在處理 API 或外部數據源時，字段的類型可能有所不同。

• 可選或多狀態變數：例如，一個變數可以將加載狀態表示為布林值，將錯誤表示為字串，或將有效數據表示為對象：

    typescriptCopyEditlet status: boolean | string | { success: boolean; data: any };
  

如何在 TypeScript 中處理對象、數組和函數類型

要掌握 TypeScript，您必須了解 TypeScript 支持的各種數據類型，以及何時和如何使用它們。

JavaScript原始類型，如字符串，數字，布爾值等，也定義了TypeScript中數據的基本構建塊。但特別是，對象，數組，和函數是構建強大應用程序的基本要素。通過對象、數組和函數，您可以更好地處理數據並在開發中高效使用它們。

TypeScript中的對象類型

對象類型表示在TypeScript中創建對象的藍圖。您可以使用對象來定義它們的形狀，類似於類在面向對象編程（OOP）中的使用方式。但對象缺乏類提供的行為方面和封裝。

要定義對象類型，請在冒號（：）之後明確定義對象的藍圖。例如：

// 對象類型初始化

let student: {
    name: string;
    age: number;
    matricNumber: string | number;
 };

// 將對象賦值實際數據

student = {
    name: "Akande"
    age: 21,
    matricNumber: 21/52 + "HP" + 19,
};

請注意，屬性以分號;結束，而不是逗號,，這樣才能在實際對象中結束它們。

上述是在TypeScript中定義對象的主要方法。另一種方法是使用接口，我將在本文後面介紹。

在TypeScript中的數組類型

在 TypeScript 中，陣列允許您將相同或不同數據類型的多個值存儲在單個變量中。通過強制在陣列元素之間實現類型一致性，它們提高了代碼的安全性和清晰度。

在 TypeScript 中，陣列類型可以通過兩種方式來定義：

1. 使用 Array<type> 模型

此語法使用泛型 Array 類型，其中 type 代表陣列可以容納的元素類型。

typescriptCopyEditlet numbers: Array<number> = [1, 2, 3, 4, 5];
let mixedArray: Array<number | string> = [1, 2, 3, 4, 5, "Hello"];

• numbers 範例：此陣列只能包含數字。嘗試將字符串或其他類型添加到此陣列將導致類型錯誤。

    typescriptCopyEditnumbers.push(6); // 正確
    numbers.push("Hello"); // 錯誤：類型 'string' 不能賦值給類型 'number'
  

• mixedArray 範例：這個陣列使用聯合類型（number | string），可以存儲數字和字符串。

    typescriptCopyEditmixedArray.push(42); // 有效
    mixedArray.push("TypeScript"); // 有效
    mixedArray.push(true); // 錯誤：類型 'boolean' 無法賦值給類型 'number | string'
  

2. 使用 type[] 模型

這種語法將方括號（[]）附加到數組可以容納的元素類型。

typescriptCopyEditconst numbers: number[] = [1, 2, 3, 4, 5];
const mixedArray: (string | number)[] = [1, 2, 3, 4, 5, "Hello"];

• numbers 範例：與 Array<number> 範例類似，此數組只能容納數字。

    typescriptCopyEditnumbers[0] = 10; // 有效
    numbers.push("Hi"); // 錯誤：類型 'string' 不能賦值給類型 'number'
  

• mixedArray的示例：与之前的mixedArray一样，此数组允许同时存储数字和字符串，提供了数据类型可能变化时的灵活性。

  typescriptCopyEditmixedArray[1] = "World"; // 有效
    mixedArray.push(true); // 错误：类型“boolean”不能赋值给类型“string | number”
  

如何在TypeScript中使用数组

数组是多才多艺的，通常用于存储相关数据集合。以下是一些实际的应用场景：

存储同类数据：
当数组中的所有元素共享相同类型时，例如用户ID列表或产品价格列表时：

typescriptCopyEditconst userIds: number[] = [101, 102, 103];
const productPrices: Array<number> = [29.99, 49.99, 19.99];

儲存異質數據:
當元素可能具有不同類型時，例如包含文本和可選元數據的消息列表：

typescriptCopyEditconst messages: (string | object)[] = [
  "Welcome",
  { type: "error", text: "Something went wrong" },
];

遍歷數組:
TypeScript中的數組可以在循環中完全類型安全地使用：

typescriptCopyEditconst scores: number[] = [80, 90, 70];
scores.forEach((score) => console.log(score + 5)); // 將5添加到每個分數

函數參數和返回類型:
數組也可以作為函數參數傳遞，或者嚴格類型地由函數返回：

typescriptCopyEditfunction getNumbers(): number[] {
  return [1, 2, 3];
}
function printStrings(strings: string[]): void {
  strings.forEach((str) => console.log(str));
}

TypeScript中的函數類型

TypeScript中的函數類型描述了函數的形狀，包括參數類型和返回類型。函數類型是通過在聲明時明確指定參數類型來定義的。返回類型是通過在括號後立即添加:和返回類型來指定的。例如：

function addition (a: number, b: number): number {
return a + b;
}

上面的函數接受兩個數字，將它們相加，並返回一個數字。如果其任何參數不是數字，或者返回的不是數字，該函數將無法工作。例如：

1. 將字符串作為參數調用函數：

// 這將無法工作，因為它期望數字，而其中一個參數是字符串

addition(1, "two");

2. 重新編寫函數以返回字符串：

// 函數將返回錯誤，因為它正在返回一個字符串

function addition (a: number, b: number): string {
    let result = a + b;
    let returnStatement = `Addition of ${a} and ${b} is: ${result}`;
    return returnStatement;
}

試著自己測試代碼，看看這些示例如何運作。

在 TypeScript 中了解並有效處理物件、陣列和函式，讓你能夠撰寫類型安全且易於維護的程式碼，從而提升應用程式的可靠性和擴展性。

如何在 TypeScript 中建立自訂類型

通常，你的設計模式並不遵循 TypeScript 內建的資料類型。例如，你可能有使用動態程式設計的模式。這可能導致程式碼庫中出現問題。TypeScript 提供了創建自訂類型以解決這個問題的方法。

自訂類型允許你根據自己的需要定義資料結構和形狀。這有助於提升程式碼的可讀性和維護性。

type 關鍵字

type 關鍵字讓你可以建立類型別名，提供了創建自訂類型的方式。你所創建的類型可以在程式碼庫中重複使用。類型別名有助於定義聯合類型或將類型組合成單個別名。創建自訂類型的語法如下：

// 語法

type TypeAlias = type;

以下是一個範例：

上面的程式碼創建了一個自訂類型 UserName，是數字和字串的聯合。它使用所創建的類型來定義兩個變數，以確認該類型是否有效。

注意，建議類型別名以大寫字母開頭。

type 關鍵字通常用於基本類型 – 那麼如何創建自訂物件類型呢？

這就是介面的用武之地。

TypeScript 介面

在 TypeScript 中，介面用於定義物件的結構。它們作為藍圖，指定物件應具備的屬性及其相應的類型。這確保了物件遵循一致的形狀，從而實現類型安全和更清晰的代碼。

定義介面

介面是使用 interface 關鍵字定義的。語法如下所示：

typescriptCopyEditinterface InterfaceName {
  property1: Type;
  property2: Type;
}

範例：

typescriptCopyEditinterface User {
  id: number;
  name: string;
  email: string;
}

const user: User = {
  id: 1,
  name: "Alice",
  email: "[email protected]",
};

以下是這個範例的內容：

1. 介面聲明 (interface User):

   • 在這裡，我們為 User 物件定義了一個藍圖。它指定任何 User 類型的物件必須具備以下屬性：

     • id 類型為 number

     • name 類型為 string

     • email 類型為 string

2. 使用接口（const user: User）：

   • 我們聲明了一個類型為User的對象user。

   • 該對象需要擁有User接口中定義的所有屬性，並且值的類型需要符合指定類型。如果缺少屬性或者類型不匹配，TypeScript將拋出編譯時錯誤。

例如：

    typescriptCopyEditconst invalidUser: User = {
      id: 1,
      name: "Alice",
      // 錯誤：類型中缺少屬性'email'
    };

所以你可能會想知道 – 為什麼要使用接口？

• 類型安全：確保對象符合預期結構，防止運行時錯誤。

• 可重複使用性：同一個接口可以在應用程序的不同部分重複使用，減少重複。

• 代碼清晰度：通過明確描述對象的形狀，使代碼更容易閱讀和理解。

接口的高級特性

1. 可選屬性: 您可以通過添加問號 (?) 使屬性變為可選。

    typescriptCopyEditinterface Product {
      id: number;
      name: string;
      description?: string; // 可選屬性
    }
   
    const product: Product = {
      id: 101,
      name: "Laptop",
    }; // 有效，因為 'description' 是可選的
   

2. 只读属性: 使用 readonly 来防止属性在初始化后被修改。

    typescriptCopyEditinterface Point {
      readonly x: number;
      readonly y: number;
    }
   
    const point: Point = { x: 10, y: 20 };
    point.x = 15; // 错误: 无法为 'x' 赋值，因为它是一个只读属性
   

3. 擴展接口: 接口可以從其他接口繼承屬性，實現組合。

    typescriptCopyEditinterface Person {
      name: string;
      age: number;
    }
   
    interface Employee extends Person {
      employeeId: number;
    }
   
    const employee: Employee = {
      name: "John",
      age: 30,
      employeeId: 1234,
    };
   

何時使用介面

有各種情況下，使用介面是一個好主意。您可以在想要定義和強制在代碼中傳遞的物件結構時使用它們。

它們在API響應中也很有用，因為它們幫助您對從API收到的物件進行類型檢查。這確保數據符合您的期望。

當使用可重複使用的類型時，介面也很方便。當應用程序的多個部分使用具有相同結構的物件時，介面可以防止重複。

通過利用介面，您可以創建健壯、易於維護和類型安全的應用程序。它們是TypeScript的一個重要特性，有助於編寫乾淨和可預測的代碼。

泛型和文字類型

泛型在TypeScript中允許您創建可與各種數據類型一起工作的可重用組件。它們讓您編寫函數、類和介面而無需事先指定確切類型，使您的代碼更靈活和易於維護。

以下是TypeScript中泛型函數和泛型介面的示例：

// 可容納任何值的泛型介面

interface  Box<T> { 
    value: T; 
}

// 使用示例

let  numberBox: Box<number> = { value: 10 };
let  stringBox: Box<string> = { value: "TypeScript" };

console.log(numberBox.value); // 輸出：10
console.log(stringBox.value); // 輸出：TypeScript

當您不確定您的數據類型時，可以使用泛型。

與泛型相比，文字類型允許您指定變數可以保存的確切值。這增加了代碼的特定性和類型安全性，防止意外值被賦值。這裡有一個例子：

type Direction = 'up' | 'down' | 'left' | 'right';

使用上述類型創建的變數只能被賦值為up、down、left和right這幾個字符串。

總的來說，在TypeScript中利用自定義類型使您能夠創建表達豐富、可重用且類型安全的數據結構，幫助您開發更強大和可維護的應用程序。

如何在TypeScript中合併類型

在TypeScript中合併類型可以將多個類型聲明組合成單一的統一類型。這種能力使開發人員能夠從較小、可重用的部分構建複雜的類型，增強代碼的清晰度、可重用性和可維護性。

1. 在接口中進行聲明合併

TypeScript支持聲明合併，當具有相同名稱的多個接口聲明時，它們將自動合併為單一接口。這讓您能夠通過定義附加屬性或方法來擴充現有接口。

例子：

typescriptCopyEditinterface User {
  id: number;
  name: string;
}

interface User {
  email: string;
}

const user: User = {
  id: 1,
  name: "Alice",
  email: "[email protected]",
};

工作原理：

• 接口User被聲明兩次，每次具有不同的屬性。

• TypeScript將這些聲明自動合併為單個接口：

    typescriptCopyEditinterface User {
      id: number;
      name: string;
      email: string;
    }
  

• 創建user對象時，必須存在合併接口的所有屬性。如果缺少任何屬性，TypeScript將引發錯誤。

當與第三方庫一起工作時，聲明合併特別有用。您可以擴展或添加新屬性到現有接口，而無需修改庫的源代碼。

2. 使用extends關鍵字進行接口合併

extends關鍵字允許一個接口繼承另一個接口的屬性和方法，創建一個結合了兩者屬性的新接口。

示例：

typescriptCopyEditinterface Person {
  name: string;
  age: number;
}

interface Employee extends Person {
  employeeId: number;
}

const employee: Employee = {
  name: "John",
  age: 30,
  employeeId: 101,
};

工作原理：

• 接口Person定義了兩個屬性：name和age。

• 接口Employee使用extends關鍵字從Person繼承屬性。

• 接口Employee還添加了一個新屬性，employeeId。

• employee對象必須包含來自Person和Employee的所有屬性。

這種方法非常適合用於層次關係。例如，您可以為共享屬性定義一個基本接口，並對其進行擴展以用於特定類型。

3. 使用&運算符進行類型合併

&運算符，也稱為交集類型，允許您將多個類型組合為單個類型。結果類型包括每個類型的所有屬性和方法。

範例：

typescriptCopyEdittype Address = {
  city: string;
  country: string;
};

type ContactInfo = {
  email: string;
  phone: string;
};

type EmployeeDetails = Address & ContactInfo;

const employee: EmployeeDetails = {
  city: "New York",
  country: "USA",
  email: "[email protected]",
  phone: "123-456-7890",
};

工作原理：

• Address和ContactInfo是兩種不同的類型。

• 員工詳細資訊 是使用 地址 & 聯絡資訊 創建的交集類型。

• 員工 物件必須包含 地址 和 聯絡資訊 的所有屬性。缺失或類型不正確的屬性將導致 TypeScript 錯誤。

交集類型在需要結合不相關類型或為特定用例創建複合類型時非常有用，例如合併不同數據結構的 API 回應。

何時使用這些方法中的每一種

1. 聲明合併： 當你想要擴展或增強現有接口時使用，特別是在第三方庫或共享代碼庫中。

2. extends 關鍵字：在層次關係中使用，當基礎接口可以專門化為更具體的類型時。

3. 交集類型（&）：在特定情況下需要將多個不相關類型組合成單一類型時使用。

通過了解這些合併技術及其影響，您可以有效地結構化您的 TypeScript 代碼，提高可重用性和可維護性，同時保持類型安全性。

TypeScript 中的打包和轉換

並非所有瀏覽器都支持 TypeScript 使用的最新 JavaScript。因此，您可以使用 TypeScript 編譯器，或者 tsc，將 TypeScript 代碼（.ts 文件）轉換為傳統的 JavaScript（.js 文件），以便所有瀏覽器都能兼容。 tsc 將 TypeScript 特定元素如類型和類轉換為瀏覽器可以解釋的 JavaScript 代碼。

要執行 TypeScript 文件，您可以使用 tsc。您可以使用 npm 安裝 tsc，然後將您的 .ts 文件轉換為 .js 文件。要使用 tsc，只需在 tsc 命令之前指定 TypeScript 文件的名稱。例如，如果您有一個名為 app.ts 的文件，您可以通過輸入以下命令運行它：

tsc app.ts

Webpack 或 Parcel 經常用於在瀏覽器上部署 TypeScript 代碼。這些工具將所有 JavaScript 文件（包括來自 TypeScript 的文件）進行打包，以提高性能並更輕鬆地實施網站。它們還通過減少代碼大小和增強瀏覽器速度來優化代碼加載。

建立更好的 TypeScript 代碼

作為 JavaScript 開發者，接受 TypeScript 的使用為撰寫更健壯和可維護的代碼打開了可能性。通過理解本指南中概述的基本概念和核心概念，您可以利用 TypeScript 的靜態類型系統在開發早期捕捉錯誤，從而減少錯誤並使代碼維護更加順利。

通過使用 TypeScript，JavaScript 開發者可以提升代碼質量和生產力。隨著您不斷探索和練習 TypeScript，您將發現更多強大的功能和特性。

不斷挑戰自己的界限，深入 TypeScript 的世界。😉