Typescript support

[Bundas]

Any plans for this? Typings would be much appreciated

[Usama-Tahir]

I'd love to have support for typescript.

[dhffdh]

I'd love to have support for typescript.

add to tsconfig.json:

  "files": [
    "src/declaration.d.ts"
  ],

add to src/declaration.d.ts:

class NotificationManager {
  static info(message?: string, title?: string | null, timeOut?: number | null, callback?: () => void | null): void;
  static error(message?: string, title?: string | null, timeOut?: number | null, callback?: () => void | null): void;
}

declare module 'react-notifications' {
  export { NotificationManager }
}

[cristian-chis]

Hello guys,

I've added these types for myself. Perhaps they can help you as well. Not sure if they are all right, but feel free to update them accordingly.

declare module 'react-notifications' {
    import { ReactNode } from 'react';
    import { EventEmitter } from 'events';

    enum NotificationType {
        INFO    = 'info',
        SUCCESS = 'success',
        WARNING = 'warning',
        ERROR   = 'error'
    }

    enum EventType {
        CHANGE  = 'change',
        INFO    = 'info',
        SUCCESS = 'success',
        WARNING = 'warning',
        ERROR   = 'error'
    }

    interface NotificationProps {
        type: NotificationType,
        title?: ReactNode,
        message: ReactNode,
        timeOut?: number,
        onClick: () => any,
        onRequestHide: () => any
    }

    interface NotificationsProps {
        notifications: Notification[];
        onRequestHide?: (notification: Notification) => any;
        enterTimeout?: number;
        leaveTimeout?: number;
    }

    interface NotificationContainerProps {
        enterTimeout?: number;
        leaveTimeout?: number;
    }

    interface INotificationManagerCreate {
        type: EventType,
        title?: NotificationProps['title']
        message?: NotificationProps['message']
        timeout?: number,
        onClick?: () => any,
        priority?: boolean
    }

    class Notification extends React.Component<NotificationProps, {}> {}

    class Notifications extends React.Component<NotificationsProps, {}> {}

    class NotificationContainer extends React.Component<NotificationContainerProps, {}> {}

    class NotificationManager extends EventEmitter {
        static create(INotificationManagerCreate) : void
        static info(message?: INotificationManagerCreate['message'], title?: INotificationManagerCreate['title'], timeOut?: INotificationManagerCreate['timeout'], onClick?: INotificationManagerCreate['onClick'], priority?: INotificationManagerCreate['priority']) : void
        static success(message?: INotificationManagerCreate['message'], title?: INotificationManagerCreate['title'], timeOut?: INotificationManagerCreate['timeout'], onClick?: INotificationManagerCreate['onClick'], priority?: INotificationManagerCreate['priority']) : void
        static warning(message?: INotificationManagerCreate['message'], title?: INotificationManagerCreate['title'], timeOut?: INotificationManagerCreate['timeout'], onClick?: INotificationManagerCreate['onClick'], priority?: INotificationManagerCreate['priority']) : void
        static error(message?: INotificationManagerCreate['message'], title?: INotificationManagerCreate['title'], timeOut?: INotificationManagerCreate['timeout'], onClick?: INotificationManagerCreate['onClick'], priority?: INotificationManagerCreate['priority']) : void
        static remove(notification: Notification) : void
    }
}

[barakjobs]

@cristian-chis Where we need to add this file and how it will take, suggest me please

[cristian-chis]

@cristian-chis Where we need to add this file and how it will take, suggest me please

You just need to add a custom typings (d.ts) file. Mine is located in my-app-name/src/typings and it's called react-notifications.d.ts. Copy/paste the declarations in the new file and you should be fine.

Don't forget to restart the server afterwards!

[luckykamon]

Hello guys,

I've added these types for myself. Perhaps they can help you as well. Not sure if they are all right, but feel free to update them accordingly.

declare module 'react-notifications' {
    import { ReactNode } from 'react';
    import { EventEmitter } from 'events';

    enum NotificationType {
        INFO  = 'info',
        SUCCESS   = 'success',
        WARNING   = 'warning',
        ERROR = 'error'
    }

    enum EventType {
        CHANGE    = 'change',
        INFO  = 'info',
        SUCCESS   = 'success',
        WARNING   = 'warning',
        ERROR = 'error'
    }

    interface NotificationProps {
        type: NotificationType,
        title?: ReactNode,
        message: ReactNode,
        timeOut?: number,
        onClick: () => any,
        onRequestHide: () => any
    }

    interface NotificationsProps {
        notifications: Notification[];
        onRequestHide?: (notification: Notification) => any;
        enterTimeout?: number;
        leaveTimeout?: number;
    }

    interface NotificationContainerProps {
        enterTimeout?: number;
        leaveTimeout?: number;
    }

    interface INotificationManagerCreate {
        type: EventType,
        title?: NotificationProps['title']
        message?: NotificationProps['message']
        timeout?: number,
        onClick?: () => any,
        priority?: boolean
    }

    class Notification extends React.Component<NotificationProps, {}> {}

    class Notifications extends React.Component<NotificationsProps, {}> {}

    class NotificationContainer extends React.Component<NotificationContainerProps, {}> {}

    class NotificationManager extends EventEmitter {
        static create(INotificationManagerCreate) : void
        static info(message?: INotificationManagerCreate['message'], title?: INotificationManagerCreate['title'], timeOut?: INotificationManagerCreate['timeout'], onClick?: INotificationManagerCreate['onClick'], priority?: INotificationManagerCreate['priority']) : void
        static success(message?: INotificationManagerCreate['message'], title?: INotificationManagerCreate['title'], timeOut?: INotificationManagerCreate['timeout'], onClick?: INotificationManagerCreate['onClick'], priority?: INotificationManagerCreate['priority']) : void
        static warning(message?: INotificationManagerCreate['message'], title?: INotificationManagerCreate['title'], timeOut?: INotificationManagerCreate['timeout'], onClick?: INotificationManagerCreate['onClick'], priority?: INotificationManagerCreate['priority']) : void
        static error(message?: INotificationManagerCreate['message'], title?: INotificationManagerCreate['title'], timeOut?: INotificationManagerCreate['timeout'], onClick?: INotificationManagerCreate['onClick'], priority?: INotificationManagerCreate['priority']) : void
        static remove(notification: Notification) : void
    }
}

I suggest some minor changes after using the code:

declare module 'react-notifications' {
    import React ,{ ReactNode } from 'react';
    import { EventEmitter } from 'events';

    enum NotificationType {
        INFO    = 'info',
        SUCCESS = 'success',
        WARNING = 'warning',
        ERROR   = 'error'
    }

    enum EventType {
        CHANGE  = 'change',
        INFO    = 'info',
        SUCCESS = 'success',
        WARNING = 'warning',
        ERROR   = 'error'
    }

    interface NotificationProps {
        type: NotificationType,
        title?: ReactNode,
        message: ReactNode,
        timeOut?: number,
        onClick: () => any,
        onRequestHide: () => any
    }

    interface NotificationsProps {
        notifications: Notification[];
        onRequestHide?: (notification: Notification) => any;
        enterTimeout?: number;
        leaveTimeout?: number;
    }

    interface NotificationContainerProps {
        enterTimeout?: number;
        leaveTimeout?: number;
    }

    interface INotificationManagerCreate {
        type: EventType,
        title?: NotificationProps['title']
        message?: NotificationProps['message']
        timeout?: number,
        onClick?: () => any,
        priority?: boolean
    }

    class Notification extends React.Component<NotificationProps> {}

    class NotificationContainer extends React.Component<NotificationContainerProps> {}

    class NotificationManager extends EventEmitter {
        static create(INotificationManagerCreate) : void
        static info(message?: INotificationManagerCreate['message'], title?: INotificationManagerCreate['title'], timeOut?: INotificationManagerCreate['timeout'], onClick?: INotificationManagerCreate['onClick'], priority?: INotificationManagerCreate['priority']) : void
        static success(message?: INotificationManagerCreate['message'], title?: INotificationManagerCreate['title'], timeOut?: INotificationManagerCreate['timeout'], onClick?: INotificationManagerCreate['onClick'], priority?: INotificationManagerCreate['priority']) : void
        static warning(message?: INotificationManagerCreate['message'], title?: INotificationManagerCreate['title'], timeOut?: INotificationManagerCreate['timeout'], onClick?: INotificationManagerCreate['onClick'], priority?: INotificationManagerCreate['priority']) : void
        static error(message?: INotificationManagerCreate['message'], title?: INotificationManagerCreate['title'], timeOut?: INotificationManagerCreate['timeout'], onClick?: INotificationManagerCreate['onClick'], priority?: INotificationManagerCreate['priority']) : void
        static remove(notification: Notification) : void
    }
}