Instructions for adding a new property dynamically when updating the draft using immer

Question

Instructions for adding a new property dynamically when updating the draft using immer

When looking at the code snippet below, we encounter an error on line 2 stating

Property 'newProperty' does not exist on type 'WritableDraft<MyObject>'.  TS7053

// data is of type MyObject which until now has only a property myNumber
const payload = produce(data, (draft) => {    
  draft['newProperty'] = 'test';              // Property 'newProperty' does not exist on type 'WritableDraft<MyObject>'.  TS7053
});

Is there a way to dynamically add a new property to the draft or modify the type of the draft to one that already includes the newProperty? I prefer not to alter the MyObject type to include newProperty.

typescript immer.js

Answer 1

Answer №1

To maintain the new data type in payload, you must cast the new type on the data parameter:

let payload = produce(data as MyObject & { newProperty: string }, (draft) => {
  draft["newProperty"] = "test";
})

If preserving the type of payload is not a concern, you have the option to change the type of draft either in the function parameter or internally like this:

(draft as MyObject & { newProperty: string })[newProperty] = "test"

Answer 2

To maintain the new data type in payload, you must cast the new type on the data parameter:

let payload = produce(data as MyObject & { newProperty: string }, (draft) => {
  draft["newProperty"] = "test";
})

If preserving the type of payload is not a concern, you have the option to change the type of draft either in the function parameter or internally like this:

(draft as MyObject & { newProperty: string })[newProperty] = "test"

Answer 3

Answer №2

It's perfectly acceptable to generate a new object from the produce method as long as you refrain from making changes to the draft object at the same time. The documentation on implementing new data from producers presents a scenario involving a switch statement where some cases alter the draft object while others return a fresh state. This approach is permissible provided that you avoid mixing both actions within a single case.

const payload = produce(data, (draft) => {
    return { ...draft, newProperty: "test" };
});

const n = payload.myNumber; // number
const s = payload.newProperty; // string

Advantages:

No need for as assertions

payload receives the correct type

{ newProperty: string; myNumber: number; }

Disadvantages:

Fails to fully exploit Immer's capabilities

Typescript Playground Link

Answer 4

It's perfectly acceptable to generate a new object from the produce method as long as you refrain from making changes to the draft object at the same time. The documentation on implementing new data from producers presents a scenario involving a switch statement where some cases alter the draft object while others return a fresh state. This approach is permissible provided that you avoid mixing both actions within a single case.

const payload = produce(data, (draft) => {
    return { ...draft, newProperty: "test" };
});

const n = payload.myNumber; // number
const s = payload.newProperty; // string

Advantages:

No need for as assertions

payload receives the correct type

{ newProperty: string; myNumber: number; }

Disadvantages:

Fails to fully exploit Immer's capabilities

Typescript Playground Link

Answer 5

Answer №3

To extend preexisting types with new properties, you can use the union operator: &. The example code provided below should help address your issue.

(draft: WritableDraft<MyObject> & { newProperty : string }) => {
  // Add your additional code here
}

Modification

Upon reviewing Linda Paiste's response, I have identified some shortcomings in my initial approach. While my solution successfully adds a property to the type, it may lead to increased verbosity and complexity in maintaining the code if type or variable names are altered in the future. Furthermore, it mandates that the function caller provide an object containing the newProperty, which may not be the intended behavior.

Answer 6

To extend preexisting types with new properties, you can use the union operator: &. The example code provided below should help address your issue.

(draft: WritableDraft<MyObject> & { newProperty : string }) => {
  // Add your additional code here
}

Modification

Upon reviewing Linda Paiste's response, I have identified some shortcomings in my initial approach. While my solution successfully adds a property to the type, it may lead to increased verbosity and complexity in maintaining the code if type or variable names are altered in the future. Furthermore, it mandates that the function caller provide an object containing the newProperty, which may not be the intended behavior.

Instructions for adding a new property dynamically when updating the draft using immer

Answer №1

Answer №2

Answer №3

Modification

Similar questions

Set the values retrieved from the http get response as variables in an Angular application

Is it possible to iterate through TypeScript using both keys and indexes?

Sticky header in React data grid

This phrase cannot be invoked

Challenges encountered while implementing generic types in TypeScript and React (including context provider, union types, and intersection

In TypeScript, this regular expression dialect does not permit the use of category shorthand

Navigational menu routing with AngularJS2 using router link paths

I'm encountering an error while trying to build my Ag-Grid using npm run build, can someone help me figure out

The attribute 'location' is not found in the 'File' data type

Issue with ngFor displaying only the second item in the array

What is the correct location for storing .html, .css, and other files in a project involving Typescript, Angular 2, and ASP.Net Core 1.0?

"TypeScript function returning a boolean value upon completion of a resolved promise

In Angular 2, I am having trouble reaching the properties of an object nested inside another object

It is impossible to add a promise's value to an array

Status:0 was received as the response from URL:null during the REST call made from my iOS Ionic application

The combination of TypeScript output is not working as expected

The parameter type 'never[]' cannot be assigned to the type 'T | (() => T)' in the argument

The value of req.headers('Authorization') has not been defined

Creating new Angular2 Observables - Subscribing to undefined developments

Monitor the change in values upon pressing the submit button on Angular