Работа с TypeScript

Для использования Noty в TypeScript необходимо установить саму библиотеку и соответствующие типы:

npm install noty
npm install --save-dev @types/noty

После установки импорт осуществляется стандартным синтаксисом ES6:

import Noty from 'noty';

Это позволяет TypeScript корректно распознавать типы и автодополнять свойства и методы уведомлений.

Создание уведомлений

В Noty уведомление создается с помощью конструктора new Noty({ ...options }), где options задают все параметры уведомления:

const notification = new Noty({
    text: 'Это уведомление',
    type: 'success',       // success, error, warning, info, alert
    layout: 'topRight',    // top, topLeft, topCenter, topRight, etc.
    timeout: 3000,         // миллисекунды до закрытия
    progressBar: true,
    closeWith: ['click', 'button'],
    theme: 'mint'
});

После создания уведомление отображается вызовом метода show():

notification.show();

Типы Noty позволяют TypeScript проверять корректность значений type, layout и других опций, снижая риск ошибок.

Настройка типов и интерфейсов

Интерфейс NotyOptions предоставляет полный набор опций для уведомлений:

interface NotyOptions {
    text?: string;
    type?: 'alert' | 'success' | 'warning' | 'error' | 'info';
    timeout?: number | false;
    progressBar?: boolean;
    layout?: 'top' | 'topLeft' | 'topCenter' | 'topRight' |
             'center' | 'centerLeft' | 'centerRight' |
             'bottom' | 'bottomLeft' | 'bottomCenter' | 'bottomRight';
    theme?: string;
    closeWith?: Array<'click' | 'button'>;
    animation?: {
        open?: string | Function;
        close?: string | Function;
    };
    callbacks?: {
        onShow?: (noty: Noty) => void;
        onClose?: (noty: Noty) => void;
        onClick?: (noty: Noty, event: Event) => void;
        afterShow?: (noty: Noty) => void;
        afterClose?: (noty: Noty) => void;
    };
}

Использование интерфейсов позволяет строго типизировать уведомления и их события, что упрощает работу с TypeScript и предотвращает ошибки при настройке.

Обработка событий уведомлений

Noty поддерживает множество событий через опцию callbacks. Например:

const notification = new Noty({
    text: 'Уведомление с событиями',
    type: 'info',
    callbacks: {
        onShow: (noty) => console.log('Показ уведомления', noty),
        onClose: (noty) => console.log('Закрытие уведомления', noty),
        onClick: (noty, event) => console.log('Клик по уведомлению', event)
    }
});

notification.show();

TypeScript позволяет проверять сигнатуры функций, что снижает вероятность ошибок при передаче событийных колбэков.

Настройка анимаций

Для TypeScript-проектов анимации можно задавать как строкой, так и функцией:

const notification = new Noty({
    text: 'Анимация открытия и закрытия',
    type: 'success',
    animation: {
        open: 'animated bounceInRight',
        close: 'animated bounceOutRight'
    },
    timeout: 2000
});

notification.show();

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

const notification = new Noty({
    text: 'Кастомная анимация',
    animation: {
        open: (promise) => {
            console.log('Начало анимации');
            promise(resolve => setTimeout(resolve, 500));
        },
        close: (promise) => {
            console.log('Закрытие уведомления');
            promise(resolve => setTimeout(resolve, 500));
        }
    }
});

notification.show();

Работа с глобальными настройками

Noty позволяет задавать глобальные параметры через метод Noty.overrideDefaults:

Noty.overrideDefaults({
    layout: 'bottomRight',
    theme: 'metroui',
    timeout: 4000,
    progressBar: true
});

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

Типизация пользовательских уведомлений

Можно создать вспомогательные функции для генерации уведомлений с предопределенными типами:

type NotificationType = 'success' | 'error' | 'info' | 'warning';

function notify(message: string, type: NotificationType = 'info') {
    new Noty({ text: message, type, timeout: 3000, progressBar: true }).show();
}

notify('Данные успешно сохранены', 'success');
notify('Произошла ошибка', 'error');

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

Асинхронное управление уведомлениями

Noty уведомления можно интегрировать с асинхронными процессами:

async function saveData() {
    const notification = new Noty({ text: 'Сохраняем данные...', type: 'info', timeout: false }).show();

    try {
        await fetch('/api/save', { method: 'POST' });
        notification.setText('Данные успешно сохранены');
        notification.setType('success');
        notification.setTimeout(3000);
    } catch (err) {
        notification.setText('Ошибка при сохранении');
        notification.setType('error');
        notification.setTimeout(3000);
    }
}

Методы setText, setType и setTimeout позволяют динамически управлять уведомлениями после их создания, полностью поддерживая строгую типизацию TypeScript.

Использование Noty с React и TypeScript

В проектах на React уведомления Noty могут быть использованы в компонентах с помощью эффектов:

import React from 'react';
import Noty from 'noty';

const MyComponent: React.FC = () => {
    const handleClick = () => {
        new Noty({ text: 'Кликнут элемент', type: 'info', timeout: 2000 }).show();
    };

    return <button onCl ick={handleClick}>Показать уведомление</button>;
};

Типизация гарантирует, что все параметры уведомлений и события будут корректны, а автодополнение облегчает работу с библиотекой.

Оглавление