Converting a custom object into a params-object in Typescript/Angular 12

Question

Converting a custom object into a params-object in Typescript/Angular 12

I am seeking to utilize the fromObject property of HttpParamsOptions in order to convert a custom object into a params-object.

Here is an example where it works:

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

However, in this scenario it does not work:

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

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

The issue arises when I define the object type using fromObject.

Error: TS2322: Type 'SearchParams' is not assignable to type '{ [param: string]: string | number | boolean | readonly (string | number | boolean)[]; }'. Index signature is missing in type 'SearchParams'.

Do you have any suggestions on how to resolve this? I am working with Angular 12.

angular typescript

Answer 1

Answer №1

Here is a simple solution:

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

The issue arises because the parameter type SearchParams does not align with the type expected by fromObject:

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

Essentially, the fromObject parameter accepts any literal object.

You can achieve the same result in a few alternative ways. For instance...

Creating a literal object (as you have done):

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

Creating an object by copying from another using the spread operator:

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

Alternatively, casting as any type:

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

According to the typescript documentation on the any type:

The any type is useful when you don’t want to write out a long type just to convince TypeScript that a particular line of code is okay.

Another option is to modify the SearchParams interface to be compatible with the type expected by the fromObject parameter:

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

Answer 2

Here is a simple solution:

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

The issue arises because the parameter type SearchParams does not align with the type expected by fromObject:

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

Essentially, the fromObject parameter accepts any literal object.

You can achieve the same result in a few alternative ways. For instance...

Creating a literal object (as you have done):

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

Creating an object by copying from another using the spread operator:

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

Alternatively, casting as any type:

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

According to the typescript documentation on the any type:

The any type is useful when you don’t want to write out a long type just to convince TypeScript that a particular line of code is okay.

Another option is to modify the SearchParams interface to be compatible with the type expected by the fromObject parameter:

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

Converting a custom object into a params-object in Typescript/Angular 12

Answer №1

Similar questions

Performing a series of Http Get requests in Angular 2 with an array that can

Struggling to locate a declaration file for the 'cloudinary-react' module? Consider running `npm i --save-dev @types/cloudinary-react` or exploring other options to resolve this issue

How can we track and record NaN values in JavaScript/TypeScript as they occur in real-time?

Angular is sending a parameter with a null value, which is not supposed to happen

Exploring how Django utilizes sessions in conjunction with Angular's cookies while integrating with Django Rest

Reordering items in Angular2 ngFor without having to recreate them

Adding a ng-select field when a button is clicked

The Angular Material Autocomplete component fails to show items upon upgrading the angular/material package to the newest version

There are two modals present on the page, however only one of them is triggered for all actions in Angular 2

Updating a string's value in Angular based on user input

Tips for utilizing angular and express to transmit data via a server and troubleshooting a 404 error

Testing with mount in React Enzyme, the setState method does not function correctly

What is the process for adding color to an Object3D Object in ThreeJs?

Encountering a GitHub REST API CORS issue while attempting to fetch a public repository's git archive

Utilizing Angular to Build a Single Router with Numerous Components

Is Angular 4 failing to set headers properly or is Express.js searching in the wrong place?

tips for converting a single observable item into an observable list

Unable to properly display date formatting in AG-Grid using the Angular date pipe

What is the best ECMAScript version to select for implementing the TypeScript compiler in an Electron application?

The module 'json-stringify-safe' could not be located