angular - How do I resolve Object literal may only specify known properties, and 'xxxx' does not exist in type 'Partial<Object>'. in ModalOptions

Question

Background

Basically I had created a mixin for opening and closing my modals in ngx-bootstrap/modal

Below is the code for the modal

export const modalMixin = <T extends Constructor>(BaseClass: T = class {
} as T) =>
  class extends BaseClass {
    config: ModalOptions = {
      initialState: {id: 0},                // Problem is occurring here
      backdrop: true,
      ignoreBackdropClick: true,
      animated: true,
    };
    modalRef: BsModalRef;
    modalServiceInjected: BsModalService;
    constructor(...args: any[]) {
      super(...args);
      this.modalServiceInjected = args[0];
    }

    openModal({id, component}: { id: number; component: any; }) {
      this.storeInjected.dispatch(loadModals());
      this.config.initialState = {id};
      this.modalRef = this.modalServiceInjected.show(component, this.config);
      this.modalRef.setClass('modal-lg bg-dark text-light modal-container ');
    }

    closeModal() {
      // Some code here to dispatch action to close modal
    }
  };

Simply what I have achieve is that any class that extends my modalMixin() function has all required properties and function to open a modal. If I call this.openModal({id: 123, component: SomeCompenent}) then SomeComponent will be opened with @Input = 123 123 being the value passed in the openModal function.

Challenge

The above functionality is working only that I receive below error

Error: src/app/mixins/modal.mixin.ts:13:22 - error TS2322: Type '{ id: number; }' is not assignable to type 'Partial<Object>'.
  Object literal may only specify known properties, and 'id' does not exist in type 'Partial<Object>'.

13       initialState: {id: 0},

I do understand what the error is saying. As stated in this question Why am I getting an error "Object literal may only specify known properties"?, I understand that properties not included in the type will throw an error

but how do I pass { id: number } as a Partial<Object>? Simply what properties are included in Partial<Object>

WorkAround

Currently I have found two ways to make the error go away

config: ModalOptions = {
      initialState: {id: 0} as Partial<Object>,
      backdrop: true,
      ignoreBackdropClick: true,
      animated: true,
    };

And simply

config: any = {
      initialState: {id: 0} as Partial<Object>,
      backdrop: true,
      ignoreBackdropClick: true,
      animated: true,
    };

The above approaches seem to solve the problem, what I need now is how would I create an Object of the form Partial<Object>?

question from:https://stackoverflow.com/questions/66046505/how-do-i-resolve-object-literal-may-only-specify-known-properties-and-xxxx-do

Answer 1

Waitting for answers