Использование в TypeScript-проектах

Для работы с iziToast в TypeScript необходимо установить пакет через npm:

npm install izitoast

и подключить его стили в проект:

import 'izitoast/dist/css/iziToast.min.css';
import iziToast from 'izitoast';

Важно учитывать, что библиотека не предоставляет встроенных типов для TypeScript. Для корректной работы необходимо либо использовать сторонние типы @types/izitoast:

npm install --save-dev @types/izitoast

либо создать собственное объявление модуля:

declare module 'izitoast' {
    interface IziToastSettings {
        title?: string;
        message?: string;
        position?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'topCenter' | 'bottomCenter';
        timeout?: number;
        progressBar?: boolean;
        close?: boolean;
        closeOnEscape?: boolean;
        closeOnClick?: boolean;
        layout?: number;
        balloon?: boolean;
        transitionIn?: string;
        transitionOut?: string;
        icon?: string | boolean;
        color?: string;
        backgroundColor?: string;
        theme?: 'light' | 'dark';
        [key: string]: any;
    }

    function show(settings: IziToastSettings): void;
    function success(settings: IziToastSettings): void;
    function error(settings: IziToastSettings): void;
    function info(settings: IziToastSettings): void;
    function warning(settings: IziToastSettings): void;

    export default { show, success, error, info, warning };
}

Это позволяет TypeScript корректно проверять типы параметров и предотвращает ошибки компиляции.

Основные методы и параметры

iziToast.show(settings: IziToastSettings) — универсальный метод для отображения уведомлений. Параметр settings содержит настройки уведомления. Основные ключи:

  • title — заголовок уведомления.
  • message — текст сообщения.
  • position — позиция на экране (topRight по умолчанию).
  • timeout — время жизни уведомления в миллисекундах.
  • progressBar — отображение индикатора прогресса.
  • close — отображение кнопки закрытия.
  • transitionIn и transitionOut — анимации появления и скрытия.
  • theme — цветовая тема (light или dark).

Дополнительно доступны методы упрощённого вызова:

  • iziToast.success(settings) — зеленое уведомление об успехе.
  • iziToast.error(settings) — красное уведомление об ошибке.
  • iziToast.info(settings) — синее информационное уведомление.
  • iziToast.warning(settings) — оранжевое предупреждение.

Пример использования:

iziToast.success({
    title: 'Успех',
    message: 'Данные успешно сохранены!',
    position: 'topRight',
    timeout: 3000
});

Типизация событий

Для интеграции с TypeScript важно типизировать события iziToast. Например, можно определить интерфейс для коллбеков:

interface IziToastCallbacks {
    onOpening?: () => void;
    onOpened?: () => void;
    onClosing?: () => void;
    onClosed?: () => void;
}

Использование:

iziToast.show({
    title: 'Информация',
    message: 'Обновление завершено',
    onOpening: () => console.log('Уведомление открывается'),
    onClosed: () => console.log('Уведомление закрыто')
});

Настройка глобальных параметров

Инициализация общих настроек позволяет не повторять их для каждого уведомления:

iziToast.settings({
    timeout: 4000,
    position: 'topRight',
    theme: 'dark',
    progressBar: true
});

После этого все уведомления будут наследовать эти значения по умолчанию, при необходимости их можно переопределять для конкретного вызова.

Работа с пользовательскими иконками и HTML-контентом

iziToast поддерживает кастомные иконки и HTML:

iziToast.show({
    title: 'Важное сообщение',
    message: '<b>Содержимое</b> с HTML-тегами',
    icon: 'fa fa-bell',
    balloon: true
});
  • icon — строка с классом иконки или false для отключения.
  • balloon — если true, уведомление принимает форму “шарика”, что часто используется для акцентирования внимания.

Продвинутое использование: очереди уведомлений и кастомные кнопки

Для управления несколькими уведомлениями можно использовать iziToast.queue и кастомные кнопки через параметр buttons:

iziToast.show({
    title: 'Вопрос',
    message: 'Хотите подтвердить действие?',
    buttons: [
        ['<button>Да</button>', (instance, toast) => {
            console.log('Подтверждено');
            instance.hide({ toast });
        }],
        ['<button>Нет</button>', (instance, toast) => {
            console.log('Отменено');
            instance.hide({ toast });
        }]
    ]
});
  • buttons принимает массив массивов: [HTML-код кнопки, callback].
  • instance.hide({ toast }) закрывает конкретное уведомление.

Советы по интеграции с TypeScript

  1. Создавать глобальный тип для iziToast, если @types/izitoast недоступен.
  2. Использовать строгую типизацию для событий и настроек уведомлений.
  3. Определять интерфейсы для кастомных кнопок и параметров, чтобы избежать ошибок на этапе компиляции.
  4. Использовать import iziToast from 'izitoast' вместо глобального доступа через window, что улучшает модульность кода.

Примеры комплексной интеграции

interface NotificationOptions {
    type: 'success' | 'error' | 'info' | 'warning';
    title: string;
    message: string;
    timeout?: number;
}

function notify({ type, title, message, timeout = 3000 }: NotificationOptions) {
    iziToast[type]({
        title,
        message,
        timeout,
        position: 'topRight',
        progressBar: true
    });
}

notify({ type: 'success', title: 'Сохранено', message: 'Файл успешно загружен' });
notify({ type: 'error', title: 'Ошибка', message: 'Не удалось подключиться к серверу' });

Такой подход обеспечивает полную совместимость с TypeScript, строгую проверку типов и гибкость в управлении уведомлениями.

Оглавление