Property ... is missing in type WritableDraft<...> but required in type ...

[Rennix09]

🙋‍♂ Question

I got a type error when I tried to wrap a class instance that owns private fields. WhatI should I do?

Code Snippet

import { WritableDraft } from "immer/dist/internal";

class Frontend {
    private frameworks: string[] = ['React', 'Vue', 'Angular'];
}

const frontend: Frontend = {} as WritableDraft<Frontend>; 

Expect: The wrapped type is compatible to the original type

Actual: Property 'frameworks' is missing in type 'WritableDraft' but required in type 'Frontend'.ts(2741)

• Immer version:
• [ ] Occurs with setUseProxies(true)
• [ ] Occurs with setUseProxies(false) (ES5 only)

[Rennix09]

Resolved this by defining an interface.

import { WritableDraft } from "immer/dist/internal";
interface IFrontend {
  ... // all the public members here
}

class Frontend implements IFrontend {
    private frameworks: string[] = ['React', 'Vue', 'Angular'];
}

const frontend: IFrontend = {} as WritableDraft<IFrontend>;