一、模塊

在TypeScript中，模塊是一種組織和封裝代碼的方式。模塊使得代碼可以按照特定的規則劃分為不同的文件，并且可以在這些文件之間進行導入和導出，從而實現代碼的重用和組織。

1. 默認導入導出

默認模塊導出是一種特殊的導出語法，在一個模塊中只能有一個默認導出。默認導出可以是任何合法的JavaScript表達式，可以是一個對象、一個函數、一個類等等。

使用默認模塊導出的步驟如下：

1. 在模塊中定義默認導出的內容，例如一個對象：

   // module.ts
   export default {
     name: "John",
     age: 25
   };
   

2. 在導入模塊的地方使用導入語法導入默認模塊，并為其指定一個名字（這個名字可以自定義）：

   // main.ts
   import person from "./module";
   console.log(person.name); // "John"
   console.log(person.age); // 25
   

注意事項：

1. 默認導出不需要使用花括號{}來包裹，而且導入時名字可以自定義，但是還是建議在導入時使用與默認導出名字相同的變量名,因為不同的變量名會增加代碼的閱讀難度。
2. 可以與命名導出同時存在，但在一個模塊中只能有一個默認導出。
3. 默認導出的內容是一個整體，不能像命名導出一樣只導入其中的某個成員。例如，如果默認導出的是一個對象，那么導入的時候只能使用整個對象，而不能只使用其中的某個屬性或方法

除了默認導出，TypeScript還支持命名導出，可以在一個模塊中導出多個命名實體，并在導入時分別使用花括號{}來指定導入的內容。命名導出和默認導出的組合使用可以讓我們更靈活地在模塊中共享代碼。

2. 命名導入導出

使用命名導入導出模塊的步驟如下：

1. 定義模塊：在一個文件中使用關鍵字export將需要導出的變量、函數或類標記為可導出的。
   例如，我們有一個helper.ts文件，其中定義了兩個函數：

export function greet(name: string) {
  console.log(`Hello, ${name}!`);
}

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

2. 導入模塊：在另一個文件中使用關鍵字import導入需要使用的模塊。
   例如，我們有一個main.ts文件，需要使用helper.ts中的函數：

import { greet, calculateSum } from './helper';

greet('John');
console.log(calculateSum(5, 3));

3. 編譯和執行：使用TypeScript編譯器（如tsc命令）將TypeScript代碼轉換為JavaScript代碼，然后執行JavaScript代碼。

使用模塊時需要注意以下幾點：

1. 導入和導出的名稱必須匹配：在導入模塊時，需要使用導出模塊的名稱來引用它們。如果導出的是一個默認導出（使用關鍵字export default），則可以自定義導入的名稱。

2. 導入模塊的路徑需要正確：在導入模塊時，需要提供正確的文件路徑。可以使用相對路徑或絕對路徑來指定模塊的位置。

3. 避免循環依賴：當模塊之間存在循環依賴時，可能會導致編譯和執行出錯。應該盡量避免循環依賴的情況。

3. 默認和命名混合使用

在一個模塊文件中，可以同時導出默認模塊和命名模塊，但是導入時需要使用不同的語法。例如：

• 導出時

// 模塊：mathUtils.ts
export default function add(a: number, b: number): number {
  return a + b;
}

export function subtract(a: number, b: number): number {
  return a - b;
}

• 導入時

分開導入

// 導入默認導出
import add from 'mathUtils';

// 導入命名導出
import { subtract } from 'mathUtils';

同時導入

// 導入默認導出和命名導出
import add, { subtract } from 'mathUtils';

二、命名空間

1. 什么是命名空間

在TypeScript中，命名空間（namespace）是用來組織和管理代碼的一種方式。它提供了一種將相關的代碼分組、隔離和導出的機制，避免了全局命名沖突的問題。

命名空間的使用通過namespace關鍵字來定義，可以在一個文件中定義多個命名空間，并且可以嵌套使用。命名空間中可以包含類、函數、接口和其他命名空間。

下面是一個示例，演示了如何在TypeScript中使用命名空間：

namespace Shapes {
  export interface Shape {
    name: string;
    calculateArea(): number;
  }

  export class Circle implements Shape {
    constructor(public name: string, public radius: number) {}

    calculateArea() {
      return Math.PI * Math.pow(this.radius, 2);
    }
  }

  export class Rectangle implements Shape {
    constructor(public name: string, public width: number, public height: number) {}

    calculateArea() {
      return this.width * this.height;
    }
  }
}

const circle = new Shapes.Circle("Circle", 5);
console.log(circle.calculateArea()); // 輸出: 78.53981633974483

const rectangle = new Shapes.Rectangle("Rectangle", 3, 4);
console.log(rectangle.calculateArea()); // 輸出: 12

在上面的代碼中，命名空間Shapes被用來組織包含了Shape接口、Circle類和Rectangle類的代碼。通過使用export關鍵字，這些內容可以在命名空間外部訪問到。

命名空間中的元素可以通過namespace.element的方式進行訪問。在上面的示例中，通過Shapes.Circle和Shapes.Rectangle來實例化了Circle和Rectangle類。

2. 命名空間的使用場景

在TypeScript中，當需要將相似的類、接口、函數或常量歸類并按照一定的層次結構組織時，可以使用命名空間。命名空間提供了一種將相關的代碼進行分組的機制，能夠避免全局命名沖突，并且可以幫助組織和管理代碼。

以下是一些使用命名空間的情況和示例說明：

1. 防止命名沖突：當在一個項目中使用第三方庫或引入其他模塊時，可能會存在命名沖突的問題。可以使用命名空間來避免這些沖突。例如：

// myLib.ts
namespace MyLib {
  export class MyClass {
    // ...
  }
}

// app.ts
let obj = new MyLib.MyClass();

2. 模塊/組件的命名空間：當需要組織項目中的模塊或組件時，可以使用命名空間。例如，可以將所有涉及用戶界面的類和函數放在一個命名空間中：

// ui.ts
namespace MyApp.UI {
  export class Button {
    // ...
  }

  export function showAlert(message: string) {
    // ...
  }
}

// app.ts
let btn = new MyApp.UI.Button();
MyApp.UI.showAlert("Hello!");

3. 兼容其他庫或框架：某些第三方庫或框架可能已經使用了全局命名空間，并且要在TypeScript項目中使用這些庫時，可以使用命名空間來與這些庫進行兼容。例如：

// myLib.d.ts （聲明文件）
declare namespace ThirdPartyLib {
  // 聲明第三方庫中的類、方法等
}

// app.ts
let obj = new ThirdPartyLib.SomeClass(); // 使用第三方庫的類

需要注意的是，TypeScript已經引入了模塊化的概念，模塊和命名空間是互斥的，不能同時使用,使用ES6模塊的導入和導出語法已經足夠滿足大部分需求。命名空間主要用于兼容舊的JavaScript代碼或處理特定的命名沖突問題。因此，如果在新項目中開始使用TypeScript，推薦使用模塊化來管理代碼，而不是過度依賴命名空間。

為什么？
因為

1. 使用模塊替代命名空間：由于模塊提供了更好的模塊化支持，推薦使用模塊來組織代碼。如果項目已經使用了命名空間來組織代碼，可以逐步將代碼重構為模塊。

2. 使用模塊化語法：模塊使用的是模塊化語法，例如使用 import 和 export 來導入和導出模塊中的內容，而命名空間使用的是傳統的命名空間語法，例如使用 namespace 和 module 來定義命名空間。

3. 模塊化的文件結構：模塊的文件結構應該符合模塊化的規范，例如一個模塊應該是一個獨立的文件，文件名應該與模塊名相同。

4. 使用模塊解決命名沖突：如果有多個模塊之間存在命名沖突，可以使用模塊的導入導出功能來解決沖突問題，而不需要使用命名空間。

總之，在 TypeScript 中使用模塊和命名空間時，應該優先考慮使用模塊來組織和管理代碼，使用模塊化語法來導入和導出模塊中的內容，避免使用命名空間來組織代碼和解決命名沖突。