TypeScript：能否实现参数依赖首参的条件函数？类是否支持？

当然可以实现这种行为，TypeScript提供了两种常用方案来满足你的需求：函数重载，或者利用联合类型定义参数元组。

方案一：函数重载 #

函数重载允许你为同一个函数定义多个签名，TypeScript会根据传入的参数匹配对应的签名，从而实现参数的动态约束：

import { Observable, of } from 'rxjs';

// 定义两个重载签名
function post(item: "book", bookName: string): Observable<any>;
function post(item: "page", bookPage: number): Observable<any>;

// 函数实现（使用联合类型兼容所有重载情况）
function post(item: "book" | "page", param: string | number): Observable<any> {
  if (item === "book") {
    // 这里param会被类型守卫推断为string
    console.log("处理书籍：", param);
  } else {
    // 这里param会被类型守卫推断为number
    console.log("处理页码：", param);
  }
  return of(null);
}

// 调用示例：
post("book", "TypeScript实战"); // 合法
post("page", 100); // 合法
// post("book", 100); // 报错，类型不匹配

方案二：联合类型参数元组 #

你也可以直接将函数的参数列表定义为联合类型的元组，这种方式更简洁，不需要单独写重载签名：

import { Observable, of } from 'rxjs';

function post(...args: ["book", string] | ["page", number]): Observable<any> {
  const [item, param] = args;
  if (item === "book") {
    console.log("书籍名称：", param); // param推断为string
  } else {
    console.log("页码：", param); // param推断为number
  }
  return of(null);
}

// 调用示例同样合法
post("book", "JavaScript高级程序设计");
post("page", 50);

在类中实现相同行为 #

这种动态参数约束完全可以在类的方法中实现，同样支持上述两种方案：

类中使用函数重载 #

import { Observable, of } from 'rxjs';

class ContentService {
  // 定义方法重载签名
  post(item: "book", bookName: string): Observable<any>;
  post(item: "page", bookPage: number): Observable<any>;

  // 方法实现
  post(item: "book" | "page", param: string | number): Observable<any> {
    if (item === "book") {
      console.log("类方法处理书籍：", param);
    } else {
      console.log("类方法处理页码：", param);
    }
    return of(null);
  }
}

const service = new ContentService();
service.post("book", "React设计模式");
service.post("page", 30);

类中使用联合参数元组 #

import { Observable, of } from 'rxjs';

class ContentService {
  post(...args: ["book", string] | ["page", number]): Observable<any> {
    const [item, param] = args;
    if (item === "book") {
      console.log("类方法处理书籍：", param);
    } else {
      console.log("类方法处理页码：", param);
    }
    return of(null);
  }
}

const service = new ContentService();
service.post("book", "Vue.js实战");
service.post("page", 25);

两种方案都能在编译阶段就约束参数的合法性，避免传入不符合预期的参数组合。

内容的提问来源于stack exchange，提问作者artur shevtsov