TypeScript Academy · 课时

构建器模式基础

Q: 「构建器模式基础」这节课中我会学到什么？

逐步构建复杂对象。 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

逐步构建复杂对象。

构建器模式基础 是 CoddyKit 上的免费 TypeScript Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 TypeScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 4 节课。

为什么需要构建器

有些对象包含许多字段，如果使用一个包含大量位置参数的庞大构造函数来创建，就很容易出错。构建器模式通过逐步执行一次一个命名调用来构建复杂对象。

我们想要的对象

设想一个包含 url、方法、请求头和请求体的 HTTP 请求。将所有这些内容传给一个构造函数很难阅读。构建器允许我们使用名称清晰的方法分别设置每个部分。

interface HttpRequest {
  url: string;
  method: string;
  headers: Record<string, string>;
  body?: string;
}

基本构建器类

构建器在内部保存部分状态，并公开 setter 方法。每个 setter 都会修改内部状态，并负责设置一个字段。

class RequestBuilder {
  private url = "";
  private method = "GET";
  private headers: Record<string, string> = {};
  private body?: string;
}

方法链返回 this

让构建器调用读起来流畅的诀窍，是让每个 setter 都返回 this。由于每个方法都返回同一个构建器，您可以将多个调用串联起来。

class RequestBuilder {
  private url = "";
  setUrl(u: string): this {
    this.url = u;
    return this;
  }
}

添加更多步骤

每个配置步骤都遵循相同的模式：存储值，然后返回 this。请注意，返回类型 this 可以让具体的构建器类型在整个调用链中保持不变。

  setMethod(m: string): this {
    this.method = m;
    return this;
  }
  addHeader(k: string, v: string): this {
    this.headers[k] = v;
    return this;
  }

build() 方法

最后，build() 方法会将累积的状态组装成最终对象。这是唯一一个不返回构建器的方法。

  build(): HttpRequest {
    return {
      url: this.url,
      method: this.method,
      headers: this.headers,
      body: this.body,
    };
  }

使用构建器

现在，构建过程读起来就像一句话。每个步骤都有明确名称，顺序也很灵活，您不再需要处理位置参数。

const req = new RequestBuilder()
  .setUrl("https://api.test")
  .setMethod("POST")
  .addHeader("Accept", "application/json")
  .build();
console.log(req.method);

完整的可运行示例

下面是一个可以直接运行的自包含版本。构建器会累积状态，而 build() 会生成最终的、表现为不可变的对象。

interface Req { url: string; method: string }
class B {
  private url = ""; private method = "GET";
  setUrl(u: string): this { this.url = u; return this; }
  setMethod(m: string): this { this.method = m; return this; }
  build(): Req { return { url: this.url, method: this.method }; }
}
const r = new B().setUrl("/users").setMethod("POST").build();
console.log(r.url, r.method);

默认值自动提供

由于构建器会使用合理的默认值初始化字段，调用方只需覆盖所需的部分。未设置的步骤会保留默认值。

const getReq = new B().setUrl("/health").build();
console.log(getReq.method); // GET (default)

可读性与构造函数

请比较 new Req("/x", "POST", {}, undefined) 和链式构建器。构建器版本会在每个步骤中说明意图，也避免了令人困惑的 undefined 占位参数。

何时使用构建器

当对象包含许多可选部分、构建过程分多个步骤进行，或您希望拥有可读且能够自我说明的 API 时，请使用构建器。如果只有两三个字段，普通对象字面量会更简单。

快速检查

快速检查本课内容。

回顾

构建器会逐步构造复杂对象。设置方法各自存储一个字段，并返回 this 以支持链式调用，而 build() 会组装最终对象。当对象包含许多可选部分时，构建器尤其有用。

常见问题解答

「构建器模式基础」课时是免费的吗？

是的 — 「构建器模式基础」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 TypeScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 4 节课。

「构建器模式基础」这节课中我会学到什么？

逐步构建复杂对象。你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 TypeScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「构建器模式基础」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 TypeScript Academy 课中编写并运行代码吗？

能。每节 TypeScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 TypeScript Academy