星途面试题库

面试题：TypeScript 中模块与命名空间在导出成员上的区别

请阐述在TypeScript里，模块和命名空间在导出成员（如变量、函数、类等）的语法及使用场景上有哪些不同之处，并各举一个简单的代码示例说明。

31.0万热度

难度

前端开发TypeScript

知识考点

AI 面试

面试题答案

语法区别

模块：在TypeScript中，模块使用export关键字来导出成员。可以在定义时直接导出，也可以在末尾统一导出。
- 定义时直接导出示例：

// module.ts
export const moduleVariable = 'This is a module variable';
export function moduleFunction() {
    return 'This is a module function';
}
export class ModuleClass {
    message = 'This is a module class';
}

- 末尾统一导出示例：

// module2.ts
const moduleVariable2 = 'This is another module variable';
function moduleFunction2() {
    return 'This is another module function';
}
class ModuleClass2 {
    message = 'This is another module class';
}
export { moduleVariable2, moduleFunction2, ModuleClass2 };

命名空间：命名空间使用namespace关键字定义，导出成员通过在命名空间内部定义。如果要在外部访问命名空间成员，命名空间需要在全局作用域下定义，并且成员使用export关键字导出。

// namespace.ts
namespace MyNamespace {
    export const namespaceVariable = 'This is a namespace variable';
    export function namespaceFunction() {
        return 'This is a namespace function';
    }
    export class NamespaceClass {
        message = 'This is a namespace class';
    }
}

使用场景区别

模块：
- 场景：模块用于将代码分割成独立的单元，每个模块都有自己独立的作用域，适合用于大型项目中分离不同功能的代码，便于代码的维护和复用。模块可以是.ts文件，并且可以通过import语句从其他模块导入所需的成员。
- 示例：假设我们有一个电商项目，我们可以将用户相关的操作封装在一个模块userModule.ts中，订单相关操作封装在orderModule.ts中。在main.ts中可以这样导入使用：

// main.ts
import { moduleFunction as userFunction } from './userModule';
import { moduleFunction as orderFunction } from './orderModule';
console.log(userFunction());
console.log(orderFunction());

命名空间：
- 场景：命名空间主要用于在全局作用域下组织相关代码，避免命名冲突。当项目规模较小，或者不希望引入过多模块时，命名空间可以将相关的代码组织在一起。它适用于一些工具类库或者简单的代码组织，这些代码不需要像模块那样完全独立的作用域。
- 示例：例如在一个小型的Web项目中，有一些工具函数，我们可以将它们组织在一个命名空间中。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Namespace Example</title>
</head>

<body>
    <script src="namespace.ts"></script>
    <script>
        console.log(MyNamespace.namespaceFunction());
    </script>
</body>

</html>

这里namespace.ts编译后生成的JavaScript代码在全局作用域下，MyNamespace对象会暴露在全局，从而可以在HTML页面中直接使用。