TypeScript设计模式：构建者模式

RoyLin
55 阅读5分钟

构建者模式（Builder Pattern）是一种创建型设计模式，旨在将复杂对象的构建过程与其表示分离，使得同样的构建过程可以创建不同的表示。它特别适合用于创建那些具有多个配置选项或复杂构造过程的对象。

在 TypeScript 中，构建者模式通过链式调用（方法链）来设置对象的属性，最后通过一个 build 方法生成最终的对象。这种方式不仅提高了代码的可读性，还能让对象的构建过程更加灵活和可控。

为什么需要构建者模式？

假设你需要构造一个复杂对象，比如一个 OpenAPI 配置文件（常用于描述 RESTful API）。这个对象可能包含多个可选字段（如路径、方法、参数、响应等），如果直接通过构造函数传递所有参数，会导致代码冗长且难以维护。构建者模式通过分步构建的方式，解决了以下问题：

  • 参数过多：避免构造函数参数列表过长。
  • 灵活性：允许逐步配置对象，跳过不必要的字段。
  • 可读性：链式调用让代码更直观，易于理解。
  • 不变性：可以在构建完成后返回一个不可变对象，增强安全性。

构建者模式的结构

在 TypeScript 中，构建者模式通常包含以下几个部分：

  1. 产品（Product） ：最终要构建的复杂对象。
  2. 构建者（Builder） ：定义构建产品的接口或抽象类，包含设置属性的方法。
  3. 具体构建者（Concrete Builder） ：实现构建者的接口，负责具体构建逻辑。
  4. 导演（Director，可选） ：负责调用构建者的方法，控制构建流程。

下面我们以一个 OpenAPI 构建器 为例，展示如何在 TypeScript 中实现构建者模式。

真实世界示例：OpenAPI 构建器

OpenAPI（即 Swagger）是一种用于描述 RESTful API 的规范。一个 OpenAPI 配置可能包含多个部分，例如 API 的基本信息、路径、方法、参数等。我们将通过构建者模式来构造一个 OpenAPI 配置对象。

代码实现

1. 定义产品：OpenAPI 配置对象

首先，定义一个表示 OpenAPI 配置的接口和类。这个类是最终构建的目标对象。

interface OpenAPIConfig {
  info: {
    title: string;
    version: string;
    description?: string;
  };
  paths: Record<string, PathItem>;
  servers?: Array<{ url: string; description?: string }>;
}

interface PathItem {
  [method: string]: {
    summary?: string;
    parameters?: Array<{ name: string; in: string; required?: boolean }>;
    responses?: Record<string, { description: string }>;
  };
}

class OpenAPI implements OpenAPIConfig {
  info: { title: string; version: string; description?: string };
  paths: Record<string, PathItem>;
  servers?: Array<{ url: string; description?: string }>;

  constructor(builder: OpenAPIBuilder) {
    this.info = builder.info;
    this.paths = builder.paths;
    this.servers = builder.servers;
  }

  toJSON() {
    return {
      openapi: "3.0.0",
      info: this.info,
      paths: this.paths,
      servers: this.servers,
    };
  }
}

2. 定义构建者：OpenAPI 构建器

接下来，定义一个 OpenAPIBuilder 类，负责逐步构建 OpenAPI 配置对象。每个方法都返回 this，以支持链式调用。

class OpenAPIBuilder {
  info: { title: string; version: string; description?: string };
  paths: Record<string, PathItem>;
  servers?: Array<{ url: string; description?: string }>;

  constructor() {
    this.info = { title: "", version: "" };
    this.paths = {};
  }

  setInfo(title: string, version: string, description?: string): this {
    this.info = { title, version, description };
    return this;
  }

  addServer(url: string, description?: string): this {
    if (!this.servers) {
      this.servers = [];
    }
    this.servers.push({ url, description });
    return this;
  }

  addPath(path: string, method: string, config: {
    summary?: string;
    parameters?: Array<{ name: string; in: string; required?: boolean }>;
    responses?: Record<string, { description: string }>;
  }): this {
    if (!this.paths[path]) {
      this.paths[path] = {};
    }
    this.paths[path][method.toLowerCase()] = config;
    return this;
  }

  build(): OpenAPI {
    return new OpenAPI(this);
  }
}

3. 使用构建者

现在，我们可以使用 OpenAPIBuilder 来构造一个 OpenAPI 配置对象。以下是一个示例：

const apiConfig = new OpenAPIBuilder()
  .setInfo("My API", "1.0.0", "A sample API for demonstration")
  .addServer("https://api.example.com", "Production server")
  .addPath("/users", "get", {
    summary: "Get all users",
    parameters: [
      { name: "limit", in: "query", required: false },
      { name: "offset", in: "query", required: false },
    ],
    responses: {
      "200": { description: "Successful response" },
      "400": { description: "Bad request" },
    },
  })
  .addPath("/users/{id}", "get", {
    summary: "Get a user by ID",
    parameters: [{ name: "id", in: "path", required: true }],
    responses: {
      "200": { description: "User found" },
      "404": { description: "User not found" },
    },
  })
  .build();

console.log(JSON.stringify(apiConfig.toJSON(), null, 2));

4. 输出结果

运行上述代码，将生成以下 JSON 格式的 OpenAPI 配置：

{
  "openapi": "3.0.0",
  "info": {
    "title": "My API",
    "version": "1.0.0",
    "description": "A sample API for demonstration"
  },
  "paths": {
    "/users": {
      "get": {
        "summary": "Get all users",
        "parameters": [
          { "name": "limit", "in": "query", "required": false },
          { "name": "offset", "in": "query", "required": false }
        ],
        "responses": {
          "200": { "description": "Successful response" },
          "400": { "description": "Bad request" }
        }
      }
    },
    "/users/{id}": {
      "get": {
        "summary": "Get a user by ID",
        "parameters": [
          { "name": "id", "in": "path", "required": true }
        ],
        "responses": {
          "200": { "description": "User found" },
          "404": { "description": "User not found" }
        }
      }
    }
  },
  "servers": [
    {
      "url": "https://api.example.com",
      "description": "Production server"
    }
  ]
}

代码分析

  1. 链式调用：OpenAPIBuilder 的每个方法（如 setInfo、addServer、addPath）都返回 this，支持链式调用，让代码更流畅。
  2. 灵活性：用户可以选择性地设置 info、servers 或 paths，而无需一次性提供所有参数。
  3. 类型安全：TypeScript 的接口和类型定义确保了配置对象的结构正确，减少运行时错误。
  4. 可扩展性：可以轻松扩展 OpenAPIBuilder，例如添加支持 components 或 security 等 OpenAPI 规范中的其他字段。

构建者模式的优点

  • 清晰的构建过程：通过方法链逐步配置，代码逻辑清晰，易于维护。
  • 避免构造函数爆炸：无需为每种配置组合定义不同的构造函数。
  • 支持复杂对象：非常适合构造像 OpenAPI 这样具有多层嵌套结构的复杂对象。
  • 不可变性：通过 build 方法返回最终对象，可以确保构建后的对象不可随意修改。

适用场景

构建者模式适用于以下场景：

  • 对象构造过程复杂，包含多个可选参数或嵌套结构。
  • 需要支持链式调用以提高代码可读性。
  • 希望将构建逻辑与对象表示分离，便于扩展和维护。

例如，在 TypeScript 项目中，构建者模式常用于：

  • API 配置（如 OpenAPI、GraphQL Schema）。
  • UI 组件配置（如表单、图表）。
  • 复杂数据结构的初始化（如报表、配置文件）。

注意事项

  • 性能开销：构建者模式会引入额外的对象（构建者实例），在性能敏感的场景中需权衡。
  • 复杂性：对于简单对象，构建者模式可能会显得过于复杂，直接构造函数可能更简洁。
  • 类型推导：在 TypeScript 中，确保构建者的方法签名与产品类的接口保持一致，以充分利用类型检查。

总结

构建者模式是一种强大且灵活的设计模式，特别适合处理复杂对象的构造过程。通过 TypeScript 的类型系统和链式调用，我们可以实现一个优雅的 OpenAPI 构建器，既保证了代码的可读性和类型安全，又提供了高度的灵活性。在实际项目中，构建者模式可以显著提升代码质量，推荐在需要构造复杂对象的场景中尝试使用。

avatar
文章
阅读
粉丝