一、模塊

在TypeScript中，模塊是一種組織和封裝代碼的方式。模塊使得代碼可以按照特定的規(guī)則劃分為不同的文件，并且可以在這些文件之間進(jìn)行導(dǎo)入和導(dǎo)出，從而實(shí)現(xiàn)代碼的重用和組織。

1. 默認(rèn)導(dǎo)入導(dǎo)出

默認(rèn)模塊導(dǎo)出是一種特殊的導(dǎo)出語法，在一個(gè)模塊中只能有一個(gè)默認(rèn)導(dǎo)出。默認(rèn)導(dǎo)出可以是任何合法的JavaScript表達(dá)式，可以是一個(gè)對(duì)象、一個(gè)函數(shù)、一個(gè)類等等。

使用默認(rèn)模塊導(dǎo)出的步驟如下：

1. 在模塊中定義默認(rèn)導(dǎo)出的內(nèi)容，例如一個(gè)對(duì)象：

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

2. 在導(dǎo)入模塊的地方使用導(dǎo)入語法導(dǎo)入默認(rèn)模塊，并為其指定一個(gè)名字（這個(gè)名字可以自定義）：

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

注意事項(xiàng)：

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

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

2. 命名導(dǎo)入導(dǎo)出

使用命名導(dǎo)入導(dǎo)出模塊的步驟如下：

1. 定義模塊：在一個(gè)文件中使用關(guān)鍵字export將需要導(dǎo)出的變量、函數(shù)或類標(biāo)記為可導(dǎo)出的。
   例如，我們有一個(gè)helper.ts文件，其中定義了兩個(gè)函數(shù)：

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

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

2. 導(dǎo)入模塊：在另一個(gè)文件中使用關(guān)鍵字import導(dǎo)入需要使用的模塊。
   例如，我們有一個(gè)main.ts文件，需要使用helper.ts中的函數(shù)：

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

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

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

使用模塊時(shí)需要注意以下幾點(diǎn)：

1. 導(dǎo)入和導(dǎo)出的名稱必須匹配：在導(dǎo)入模塊時(shí)，需要使用導(dǎo)出模塊的名稱來引用它們。如果導(dǎo)出的是一個(gè)默認(rèn)導(dǎo)出（使用關(guān)鍵字export default），則可以自定義導(dǎo)入的名稱。

2. 導(dǎo)入模塊的路徑需要正確：在導(dǎo)入模塊時(shí)，需要提供正確的文件路徑?？梢允褂孟鄬?duì)路徑或絕對(duì)路徑來指定模塊的位置。

3. 避免循環(huán)依賴：當(dāng)模塊之間存在循環(huán)依賴時(shí)，可能會(huì)導(dǎo)致編譯和執(zhí)行出錯(cuò)。應(yīng)該盡量避免循環(huán)依賴的情況。

3. 默認(rèn)和命名混合使用

在一個(gè)模塊文件中，可以同時(shí)導(dǎo)出默認(rèn)模塊和命名模塊，但是導(dǎo)入時(shí)需要使用不同的語法。例如：

• 導(dǎo)出時(shí)

// 模塊：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;
}

• 導(dǎo)入時(shí)

分開導(dǎo)入

// 導(dǎo)入默認(rèn)導(dǎo)出
import add from 'mathUtils';

// 導(dǎo)入命名導(dǎo)出
import { subtract } from 'mathUtils';

同時(shí)導(dǎo)入

// 導(dǎo)入默認(rèn)導(dǎo)出和命名導(dǎo)出
import add, { subtract } from 'mathUtils';

二、命名空間

1. 什么是命名空間

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

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

下面是一個(gè)示例，演示了如何在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關(guān)鍵字，這些內(nèi)容可以在命名空間外部訪問到。

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

2. 命名空間的使用場(chǎng)景

在TypeScript中，當(dāng)需要將相似的類、接口、函數(shù)或常量歸類并按照一定的層次結(jié)構(gòu)組織時(shí)，可以使用命名空間。命名空間提供了一種將相關(guān)的代碼進(jìn)行分組的機(jī)制，能夠避免全局命名沖突，并且可以幫助組織和管理代碼。

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

1. 防止命名沖突：當(dāng)在一個(gè)項(xiàng)目中使用第三方庫或引入其他模塊時(shí)，可能會(huì)存在命名沖突的問題?？梢允褂妹臻g來避免這些沖突。例如：

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

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

2. 模塊/組件的命名空間：當(dāng)需要組織項(xiàng)目中的模塊或組件時(shí)，可以使用命名空間。例如，可以將所有涉及用戶界面的類和函數(shù)放在一個(gè)命名空間中：

// 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. 兼容其他庫或框架：某些第三方庫或框架可能已經(jīng)使用了全局命名空間，并且要在TypeScript項(xiàng)目中使用這些庫時(shí)，可以使用命名空間來與這些庫進(jìn)行兼容。例如：

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

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

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

為什么？
因?yàn)?/code>