Angular 15中如何不按顺序向方法传递指定参数

TypeScript/JavaScript 本身不支持原生的「命名参数」语法（类似Python直接指定参数名传参的方式），你之前用到的应该是对象解构参数的写法，通过把参数封装成一个对象来实现类似命名传参的效果。

步骤1：定义参数接口（可选但推荐） #

先定义一个接口规范参数结构，让代码更易维护：

interface GetListRequestParams {
  page?: number;
  size?: number;
  type?: string;
  completed?: boolean;
}

步骤2：修改方法签名 #

把原方法的多个位置参数改成接受一个对象参数，通过解构获取内部值并保留默认值：

public getList(params: GetListRequestParams = {}) {
  // 解构参数并对齐原方法的默认值逻辑
  const { page, size, type, completed = false } = params;
  
  // 这里编写原有的业务逻辑（比如拼接请求、调用HTTP服务等）
}

步骤3：调用方法 #

现在可以通过指定参数名（对象键值对）的方式传参，无需关心参数顺序：

// 仅传递size参数
this.getList({ size: 1 });

// 传递多个参数
this.getList({ page: 3, type: 'todo', completed: true });

// 不传参数（使用默认的completed: false）
this.getList();

兼容原有调用方式（可选） #

如果需要保留原来的位置参数调用逻辑，可以给方法添加重载签名：

// 重载签名：支持原有位置参数调用
public getList(page?: number, size?: number, type?: string, completed: boolean = false): void;
// 重载签名：支持对象参数调用
public getList(params: GetListRequestParams): void;
// 方法实际实现
public getList(pageOrParams?: number | GetListRequestParams, size?: number, type?: string, completed: boolean = false) {
  let page: number | undefined;
  // 判断传入的是位置参数还是对象参数
  if (typeof pageOrParams === 'object' && pageOrParams !== null) {
    ({ page, size, type, completed = false } = pageOrParams);
  } else {
    page = pageOrParams;
  }
  
  // 原业务逻辑
}

这样两种调用方式都能生效：

// 原有位置参数调用
this.getList(undefined, 1);
// 对象参数调用
this.getList({ size: 1 });

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