TypeScript 命名空间学习笔记

什么是命名空间？

命名空间（Namespace）是 TypeScript 中用来组织代码的一种方式。它可以将一些具有相同作用域的变量、函数和类封装起来，避免命名冲突和全局污染。

如何使用命名空间？

在 TypeScript 中，我们可以使用 namespace 关键字来定义一个命名空间：

typescriptCopy Code
namespace MyNamespace {
  export const name = "binjie09";
  export function sayHello() {
    console.log(`Hello, ${name}!`);
  }
}

MyNamespace.sayHello(); // 输出：Hello, binjie09!

上面的例子中，我们使用 namespace 关键字定义了一个名为 MyNamespace 的命名空间，其中包含了一个名为 name 的常量和一个名为 sayHello 的函数。这两个成员都被导出了，因此可以在命名空间外部直接访问。

命名空间的嵌套

在 TypeScript 中，命名空间也可以嵌套使用，即一个命名空间中包含另一个命名空间。

typescriptCopy Code
namespace OuterNamespace {
  export namespace InnerNamespace {
    export const name = "binjie09";
    export function sayHello() {
      console.log(`Hello, ${name}!`);
    }
  }
}

OuterNamespace.InnerNamespace.sayHello(); // 输出：Hello, binjie09!

实例

假设我们有一个前端应用，需要与后端 API 进行交互。为了避免命名冲突，我们可以将所有与后端 API 相关的代码放在一个命名空间中。

typescriptCopy Code
namespace API {
  const serverUrl = "https://example.com/api";

  export interface User {
    id: number;
    name: string;
    email: string;
  }

  export function fetchUser(id: number): Promise<User> {
    return fetch(`${serverUrl}/users/${id}`).then((response) => response.json());
  }

  export function createUser(user: User): Promise<void> {
    return fetch(`${serverUrl}/users`, {
      method: "POST",
      body: JSON.stringify(user),
      headers: {
        "Content-Type": "application/json",
      },
    }).then((response) => {
      if (!response.ok) {
        throw new Error(response.statusText);
      }
    });
  }
}

上面的例子中，我们在 API 命名空间中定义了三个成员：serverUrl 常量、User 接口和两个函数 fetchUser 和 createUser。这些成员都被导出了，因此可以在命名空间外部直接访问。

使用时，我们可以这样调用：

typescriptCopy Code
API.fetchUser(123).then((user) => console.log(`Hello, ${user.name}!`));

以上是 TypeScrip 命名空间的学习笔记及实例，希望对您有所帮助！