函数类型进阶

函数是 TypeScript 一等公民。本课在 typescript-essentials 函数类型基础上，深入 函数重载、this 类型、call/apply/bind 类型、泛型函数约束、构造函数签名，覆盖 nestjs-essentials 中间件签名与 nextjs-essentials 高阶组件模式。

学习目标

• 编写正确的 function overloads
• 为回调指定 this 类型
• 区分函数类型与构造函数类型

函数重载

function formatInput(input: string): string;
function formatInput(input: number): string;
function formatInput(input: string | number): string {
  return String(input).trim();
}

formatInput("  hello  "); // OK
formatInput(42);         // OK
// formatInput(true);    // 编译错误

重载 vs 联合参数

// 简单场景：联合参数 + 运行时判断即可
function pad(value: string | number, len: number): string {
  const s = String(value);
  return s.padStart(len, "0");
}

// 复杂场景：重载表达「不同输入 → 不同输出」
function parseConfig(raw: string): Config;
function parseConfig(raw: object): Config;
function parseConfig(raw: string | object): Config {
  if (typeof raw === "string") return JSON.parse(raw);
  return raw as Config;
}

interface Config {
  apiBase: string;
}

this 类型

interface Clickable {
  label: string;
  onClick(this: Clickable, ev: Event): void;
}

const button: Clickable = {
  label: "Submit",
  onClick(ev) {
    console.log(this.label, ev.type);
  },
};

// 避免 this 丢失
const fn = button.onClick;
// fn.call(button, new Event("click")); // 需显式绑定 this

泛型函数与约束

function first<T>(arr: T[]): T | undefined {
  return arr[0];
}

function pluck<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const lesson = { slug: "tsa-intro", title: "TS 进阶地图" };
const slug = pluck(lesson, "slug"); // string

构造函数签名

interface Timestamp {
  getTime(): number;
}

interface TimestampConstructor {
  new (value?: string | number): Timestamp;
}

function createInstance(Ctor: TimestampConstructor): Timestamp {
  return new Ctor(Date.now());
}

练习

• 为 fetchJson(url) / fetchJson(url, schema) 编写重载
• 实现泛型 groupBy<T, K extends keyof T>(items: T[], key: K)
• 找出 Next.js 某 API 中 callback 的 this 绑定问题

小结

重载描述多签名契约；泛型函数 + keyof 约束是类型安全工具函数的核心模式。 下一课装饰器。