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

Error: Namespace declaration does not have a type annotation - TypeScript/Babel

Tips for referencing functions in TypeScript code

Error in ReactJS VSCode while integrating Cypress testing: The name 'cy' cannot be found

Firebase Function deployment encountered an issue during the build phase, despite the predeploy process

io-ts: Defining mandatory and optional keys within an object using a literal union

Modifying Data with MomentJS when Saving to Different Variable

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

What is the best way to access the original observed node using MutationObserver when the subtree option is set to

Exploring TypeScript Generics and the Concept of Function Overloading

Encountering a hiccup while trying to install Svelte, Skeleton, and Tail

The best practices for utilizing ES6 Modules syntax in TypeScript files within a NextJS environment

Retrieve a collection of Firebase records using a specific query parameter

Touch gestures using Hammer.js including tapping and swiping downwards

Retrieving Headers from a POST Response

Tips for generating a subject in rx.js while utilizing 2 parameters

Encountering a Javascript error while trying to optimize bundling operations

Issue with Typescript and eslint errors occurring exclusively in fresh code - Anticipated a colon.ts(1005)

Error: Unable to iterate through posts due to a TypeError in next.js

What are some strategies for circumventing the need for two switches?

Error: Unable to locate the specified Typescript function