Підвищення точності визначення типу modalInstance для NgbModal в Angular

4 Березня 2024 в 16:39 39

У розвитку веб-додатків на Angular часто виникає потреба у створенні модальних вікон для взаємодії з користувачем. Один з популярних способів створення модальних вікон у проєктах Angular – використання бібліотеки @ng-bootstrap/ng-bootstrap. Проте, при роботі з NgbModal може виникати проблема з коректним визначенням типу modalInstance, що може призводити до неправильної типізації даних та збоїв у роботі додатку.

Одним із способів вирішення цієї проблеми є створення власного оголошення типу для NgbModal, яке правильно визначатиме тип modalInstance. У цій статті ми розглянемо, як саме це можна зробити.

Проблема

При роботі з NgbModal може виникати ситуація, коли важко або неможливо правильно визначити тип modalInstance. Наприклад, метод open NgbModal приймає параметр content з типом any:

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

export declare class NgbModal {

open(content: any, options?: NgbModalOptions): NgbModalRef;

}

Це призводить до того, що при доступі до властивостей компонента, переданого у параметрі content, тип даних не може бути визначений іншими засобами Angular, і він автоматично встановлюється як any.

Аналогічна проблема виникає й у методі get componentInstance() класу NgbModalRef:

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

export declare class NgbModalRef {

get componentInstance(): any;

}

Це робить неможливим визначення типу modalInstance за допомогою стандартних засобів Angular.

Рішення

Один із шляхів вирішення цієї проблеми – створення власного оголошення типу для NgbModal та NgbModalRef, яке дозволить правильно визначити тип modalInstance.

Створимо файл types.d.ts, в якому оголосимо нові інтерфейси для NgbModal та NgbModalRef:

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

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

}

Це оголошення розширює вбудовані інтерфейси NgbModal та NgbModalRef, додаючи генерік T, який використовується для точного визначення типу modalInstance.

Приклад використання

Для демонстрації використаємо клас ModalComponent з наступною структурою:

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 = {}; 
}

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 = {};

}

Тепер, при використанні NgbModal, ми можемо передавати типізований параметр content та правильно визначати тип modalInstance:

// Відкрити модалку 
const changeConfirmationModal = modalService.open(ModalComponent, {   
    centered: true 
});  
// Встановити дані модалки 
changeConfirmationModal.componentInstance.data = {   
    title: 'Some Title',   
    buttonText: 'Some Button Text' 
};

// Відкрити модалку

const changeConfirmationModal = modalService.open(ModalComponent, {

centered: true

});

// Встановити дані модалки

changeConfirmationModal.componentInstance.data = {

title: 'Some Title',

buttonText: 'Some Button Text'

};

Таким чином, з використанням власного оголошення типу для NgbModal та NgbModalRef, ми можемо точно визначати тип modalInstance, що дозволяє уникнути проблем з неправильною типізацією даних та забезпечити коректну роботу додатку на Angular.