TypeScript中的模块和命名空间：代码组织与封装

最新推荐文章于 2024-08-22 14:32:34 发布

逐星ing

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量634

点赞数 14

分类专栏： TypeScript 前端文章标签： typescript javascript

本文链接：https://blog.csdn.net/qq_41791705/article/details/139126628

版权

前端同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

TypeScript

34 篇文章 0 订阅

订阅专栏

TypeScript中的模块和命名空间：代码组织与封装

引言

在TypeScript中，模块和命名空间是两种用于代码组织和封装的工具。模块用于将代码划分为独立的单元，而命名空间提供了一种将相关类型和值分组的方式。

基础知识

模块：通过文件系统划分代码，每个文件可以是一个模块。
命名空间：用于组织代码，允许你在全局范围内定义类型和值。

核心概念

导出（Export）：使用 export 关键字导出模块中的实体。
导入（Import）：使用 import 关键字导入其他模块的实体。
声明合并：在命名空间中，可以合并多个声明。

示例演示

模块的使用：

// file1.ts
export function foo() {
  console.log('foo() called');
}

// file2.ts
import { foo } from './file1';
foo(); // 输出: foo() called

命名空间的使用：

// utils.ts
export namespace Utils {
  export function foo() {
    console.log('foo() called in Utils');
  }
}

// app.ts
import { Utils } from './utils';
Utils.foo(); // 输出: foo() called in Utils

命名空间与模块的结合：

// shapes.ts
export namespace Shapes {
  export class Circle {
    draw() {
      console.log('Drawing a circle');
    }
  }
}

// painter.ts
import { Shapes } from './shapes';
const circle = new Shapes.Circle();
circle.draw(); // 输出: Drawing a circle

实际应用

模块和命名空间在大型项目中非常有用，它们帮助开发者维护清晰的代码结构。

模块化大型应用：

// calculator.ts
export function add(x: number, y: number) {
  return x + y;
}

// app.ts
import { add } from './calculator';
console.log(add(5, 3)); // 输出: 8

使用命名空间组织代码：

// models.ts
export namespace Models {
  export class User {}
  export class Product {}
}

// controllers.ts
export namespace Controllers {
  export class UserController {}
  export class ProductController {}
}

// app.ts
import { Models, Controllers } from './application';
const user = new Models.User();
const controller = new Controllers.UserController();