Safe way to implement map and spread operator in your codebase

Question

Safe way to implement map and spread operator in your codebase

Is there a workaround for this issue? I am working with an interface, IFoo, and an array of data IFoo[]. My goal is to map this data and modify a single property. It should look something like this

const mapper = (foos: IFoo[]): IFoo[] => {
  return foos.map((f) => {
    return {
      ...f,
      prop4: 42
    };
  });
};

The catch is that "prop4" is not part of IFoo, but the compiler doesn't raise an error because I used the spread operator "...f" which sets all necessary props. However, I mistakenly intended to change "prop3" and missed the error.

Explicitly setting all properties is not ideal as it's time-consuming and prone to errors if a new possibly undefined prop is added to IFoo.

You can review the complete example at codesandbox.io

typescript

Answer 1

Answer №1

To improve this code, a suggestion could be to clearly define the type of the combined object as an 'IFoo' interface. This way, TypeScript will recognize that the object should only contain properties specified in the 'IFoo' interface and will flag any discrepancies:

const mapper = (foos: IFoo[]): IFoo[] => {
  return foos.map((f) => {
    const foo: IFoo = {
      ...f,
      prop4: 42 // Error: 'prop4' does not exist in type 'IFoo'
    };

    return foo;
  });
};

Check out this demo on TypeScript playground.

Answer 2

To improve this code, a suggestion could be to clearly define the type of the combined object as an 'IFoo' interface. This way, TypeScript will recognize that the object should only contain properties specified in the 'IFoo' interface and will flag any discrepancies:

const mapper = (foos: IFoo[]): IFoo[] => {
  return foos.map((f) => {
    const foo: IFoo = {
      ...f,
      prop4: 42 // Error: 'prop4' does not exist in type 'IFoo'
    };

    return foo;
  });
};

Check out this demo on TypeScript playground.

Safe way to implement map and spread operator in your codebase

Answer №1

Similar questions

Decompressing an array within a function invocation

How can you generate a distinct id value for each element within an ngFor iteration in Angular 4?

I am facing an issue where my video file is not being recognized by Next.js when using TypeScript

Change the background color of a span element dynamically

What is the best way to inform the user of their login status in Angular?

When using Vue 3 in my app, I discovered that all the TypeScript files are easily accessible through the browser console

Strategies for resolving type issues in NextJs with Typescript

Updating the state of Formik

Can you reach a screen prior to the stack navigator being established?

Managing large objects in Angular (type safety and more)

What is the best way to dynamically assign formControlNames in Angular using *ngFor?

Bringing in a script and invoking a function on a specific variable

Issue with Angular 2 pipe causing unexpected undefined result

Breaking down an object using rest syntax and type annotations

Converting JSON responses from Observables to Arrays of objects in Angular

Derive a data type from a parameter passed to a function defined within an interface

How can you establish the default value for a form from an Observable?

How do I implement an array of objects using an interface in React and Typescript?

Tips on configuring a segment in an Angular 6 route

When intercepted, the HttpRequest is being canceled