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

[Gaoliang Ren]

🙋‍♂ 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)

[Gaoliang Ren]

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>;