How can I write a custom type declaration for NgbModal that correctly infers the type of modalInstance?

27 Views Asked by At

NgbModal's open method takes in a content parameter typed as any:

// @ng-bootstrap/ng-bootstrap/modal/modal.d.ts

export declare class NgbModal {
    open(content: any, options?: NgbModalOptions): NgbModalRef;
}

That returns an NgbModalRef with a function 'get componentInstance()' that also returns any:

// @ng-bootstrap/ng-bootstrap/modal/modal-ref.d.ts

export declare class NgbModalRef {
   get componentInstance(): any;
}

I want to create a custom type definition that allows the initial open function to infer the type of the component instance.

Here's my types.d.ts file:

import {
  NgbModal as _NgbModal,
  NgbModalOptions,
  NgbModalRef as _NgbModalRef
} from '@ng-bootstrap/ng-bootstrap';

declare module '@ng-bootstrap/ng-bootstrap' {
  export interface NgbModal extends _NgbModal {
    open<T>(content: T, options?: NgbModalOptions): NgbModalRef<T>;
  }

  export interface NgbModalRef<T> extends _NgbModalRef {
    get componentInstance(): InstanceType<T>;
  }
}

Here's my modal class:

export type ModalOption = {
  title: string;
  buttonText: string;
};

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.scss']
})
export class ModalComponent {
  @Input() data: ModalOption = {};
}

Here's where I'm using it:

// Open the modal
const changeConfirmationModal = modalService.open(ModalComponent, {
  centered: true
});

// Set the modal data
changeConfirmationModal.componentInstance.data = {
  title: 'Some Title',
  buttonText: 'Some Button Text'
};

If I don't import and extend the original NgbModal / NgbModalRef in the types.d.ts file, componentInstance.data is typed correctly, but it breaks my app module as no other exports from @ng-bootstrap can be found. If I import and extend those two in my types.d.ts file, the inference breaks and componentInstance.data returns to being typed as any.

Any help would be greatly appreciated.

0

There are 0 best solutions below