TypeScript 学习笔记（三）：模块系统与命名空间

1. 引言

在前两篇学习笔记中，我们介绍了 TypeScript 的基础知识和高级类型系统。本篇将重点讲解 TypeScript 的模块系统与命名空间，帮助你理解如何组织代码、管理依赖以及与 JavaScript 互操作。

2. 模块系统

TypeScript 支持两种模块系统：ES 模块（ESM）和 CommonJS 模块。现代 TypeScript 项目通常使用 ES 模块，因其与 ES6+ 标准兼容且具有更好的支持和优化。

2.1 ES 模块

ES 模块使用 import 和 export 语法进行模块的导入和导出。

导出

有两种方式导出模块成员：命名导出和默认导出。

// 导出接口和函数
export interface Person {
    name: string;
    age: number;
}

export function greet(person: Person): string {
    return `Hello, ${person.name}`;
}

// 默认导出类
export default class Employee {
    constructor(public name: string, public age: number) {}
}

导入

导入时，可以使用命名导入或默认导入。

// 命名导入
import { Person, greet } from './module';

// 默认导入
import Employee from './module';

// 使用导入的模块成员
const person: Person = { name: "John", age: 30 };
console.log(greet(person));

const employee = new Employee("Jane", 28);
console.log(employee.name);

2.2 CommonJS 模块

CommonJS 模块使用 require 和 module.exports 语法。这种模块系统通常用于 Node.js 环境。

// 导出
const person = {
    name: "John",
    age: 30
};

function greet(person) {
    return `Hello, ${person.name}`;
}

module.exports = { person, greet };

// 导入
const { person, greet } = require('./module');

console.log(greet(person));

3. 命名空间

命名空间用于组织代码，避免全局作用域污染。在大型应用程序中，命名空间可以帮助你管理代码的结构和依赖。

3.1 定义命名空间

使用 namespace 关键字定义命名空间，并在其中声明变量、函数或类。

namespace Utility {
    export function log(message: string) {
        console.log(message);
    }

    export function error(message: string) {
        console.error(message);
    }
}

// 使用命名空间
Utility.log("This is a log message");
Utility.error("This is an error message");

3.2 命名空间嵌套

命名空间可以嵌套使用，以便更好地组织代码。

namespace App {
    export namespace Models {
        export class Person {
            constructor(public name: string, public age: number) {}
        }
    }

    export namespace Services {
        export class PersonService {
            static getPerson(): Models.Person {
                return new Models.Person("John", 30);
            }
        }
    }
}

// 使用嵌套命名空间
const person = App.Services.PersonService.getPerson();
console.log(person.name);

3.3 外部命名空间

使用外部命名空间来组织和导入第三方库。

/// <reference path="jquery.d.ts" />

namespace MyApp {
    export class Page {
        constructor() {
            $('button').click(() => {
                alert('Button clicked');
            });
        }
    }
}

// 使用外部命名空间
const page = new MyApp.Page();

4. 模块与命名空间的区别

模块和命名空间都有助于组织代码，但它们有不同的用例和特点：

• 模块：用于拆分代码，并在不同文件之间共享。每个文件就是一个模块。模块是基于文件系统的，更适合大型项目。
• 命名空间：用于在单个文件或全局范围内组织代码，避免全局作用域污染。适合较小项目或某些特定场景。

5. 与 JavaScript 互操作

TypeScript 与 JavaScript 可以无缝互操作。你可以在 TypeScript 中使用现有的 JavaScript 库，也可以将 TypeScript 编译为 JavaScript 代码运行在任何支持 JavaScript 的环境中。

5.1 使用 JavaScript 库

使用 @types 包为常见的 JavaScript 库提供类型定义，从而在 TypeScript 中享受类型检查和代码补全。

npm install --save lodash
npm install --save-dev @types/lodash

import * as _ from 'lodash';

const numbers = [1, 2, 3, 4];
const doubled = _.map(numbers, n => n * 2);
console.log(doubled);

5.2 编译 TypeScript 为 JavaScript

使用 TypeScript 编译器 tsc 将 TypeScript 代码编译为 JavaScript 代码。

tsc src/index.ts

6. 总结

在本篇学习笔记中，我们探讨了 TypeScript 的模块系统与命名空间，了解了如何使用 ES 模块和 CommonJS 模块，如何定义和使用命名空间，以及如何与 JavaScript 互操作。通过掌握这些知识，你可以更好地组织和管理 TypeScript 项目。

下一篇学习笔记将介绍 TypeScript 中的装饰器与高级编程技巧，帮助你在实际项目中应用 TypeScript 的强大功能。希望你能继续关注本系列的学习笔记，进一步提升 TypeScript 编程技能。