Typescript/Angular 12：将自定义对象转换为参数对象答案

【问题标题】：Typescript/Angular 12: cast custom object into params-objectTypescript/Angular 12：将自定义对象转换为参数对象
【发布时间】：2021-09-03 11:51:22
【问题描述】：

我想使用HttpParamsOptions 的fromObject 键将自定义对象转换为参数对象。

这行得通：

foo(): void {
   const testObject = {
     id: 123;
     name: 'test';
     someExample: 'test';
   }
   const httpParams = new HttpParams({ fromObject: testObject });
   ...
}

这不起作用：

export interface SearchParams {
  id: number;
  name: string;
  someExample: string;
}

foo(testObject: SearchParams): void {
   const httpParams = new HttpParams({ fromObject: testObject });
   ...
}

如果我定义对象类型，fromObject 不起作用。

错误：TS2322：类型 'SearchParams' 不可分配给类型 '{ [param: string]: string |号码 |布尔值 |只读（字符串|数字|布尔）[]； }'。 “SearchParams”类型中缺少索引签名。

任何想法如何解决这个问题？我正在使用 Angular 12。

【问题讨论】：

HttpParams 的构造函数接受一个带有索引签名的参数。

标签： angular typescript

【解决方案1】：

最简单的方法：

   const httpParams = new HttpParams({ fromObject: {...testObject} });

发生错误是因为您的参数类型SearchParams 与 fromObject 类型不匹配，即：

    fromObject?: {
        [param: string]: string | number | boolean | ReadonlyArray<string | number | boolean>;
    };

基本上fromObject 参数接受任何文字对象。

因此，您可以通过一些不同的方式获得相同的结果。比如……

声明一个字面量对象（你也这样做过）：

    const testObject = {
      id: 123;
      name: 'test';
      someExample: 'test';
    }
    const httpParams = new HttpParams({ fromObject: testObject  });

使用扩展运算符声明从另一个对象复制的对象：

    const myObject = { ...testObject };
    const httpParams = new HttpParams({ fromObject: myObject  });

或转换为any 类型：

   const httpParams = new HttpParams({ fromObject: testObject as any });

来自typescript doc 关于any 类型：

当你不想写出长类型时，any 类型很有用只是为了让 TypeScript 相信特定的代码行是可以的。

或者更改SearchParams接口以兼容fromObject参数类型：

  export interface SearchParams {
    id: number;
    name: string;
    someExample: string;
    [param: string]: string | number;
  }
    
  foo(testObject: SearchParams): void {
    const httpParams = new HttpParams({ fromObject: testObject });
  }

【讨论】：