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

Posted 2023-03-13

【中文标题】Typescript/Angular 12：将自定义对象转换为参数对象

【英文标题】：Typescript/Angular 12: cast custom object into params-object

【发布时间】：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 的构造函数接受一个带有索引签名的参数。

【参考方案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 );