CODEWITHSUNDEEP
javascriptreactjstypescripttypescript-typingssweetalert2
Jerin
Jerin

Reputation: 737

facing some issue to set type on sweetalert2

Typescript gave me 2 errors in the toastMixin variable and into the animation object. I didn't find any solution to solve it.

Error:

let toastMixin: typeof Swal
No overload matches this call.
  Overload 1 of 2, '(options: SweetAlertOptions<any, any>): Promise<SweetAlertResult<any>>', gave the following error.
    Argument of type '{ animation: boolean; title: string; }' is not assignable to parameter of type 'SweetAlertOptions<any, any>'.
      Object literal may only specify known properties, and 'animation' does not exist in type 'SweetAlertOptions<any, any>'.
  Overload 2 of 2, '(title?: string | undefined, html?: string | undefined, icon?: SweetAlertIcon | undefined): Promise<SweetAlertResult<any>>', gave the following error.
    Argument of type '{ animation: boolean; title: string; }' is not assignable to parameter of type 'string'.ts(2769)

Code: TS showing the error on let toastMixin and in animation object

 export const errorHandle = (massage:string) => {
    let toastMixin = Swal.mixin({
        toast: true,
        icon: 'success',
        title: 'General Title',
        animation: false,
        position: 'top-right',
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true,
        didOpen: (toast) => {
            toast.addEventListener('mouseenter', Swal.stopTimer)
            toast.addEventListener('mouseleave', Swal.resumeTimer)
        }
    });

    if (massage === 'added') {
        toastMixin.fire({
            animation: true,
            title: 'Successfully added'
        });
    } else if (massage === 'duplicate') {
        toastMixin.fire({
            title: 'You already added the developer',
            icon: 'error'
        });
    } else if (massage === 'removed') {
        toastMixin.fire({
            animation: true,
            title: 'Removed'
        });
    }
}

Upvotes: 2

Views: 2913

Answers (2)

Limon Monte
Limon Monte

Reputation: 54389

The animation parameter has been removed, use showClass and hideClass instead:

Swal.fire({
  icon: 'success',
  title: 'I am not animated',
  showClass: {
    backdrop: 'swal2-noanimation', // disable backdrop animation
    popup: '',                     // disable popup animation
    icon: ''                       // disable icon animation
  },
  hideClass: {
    popup: '',                     // disable popup fade-out animation
  },
})
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

Upvotes: 1

Jorel Amthor
Jorel Amthor

Reputation: 1294

Because there shouldnt be an animation field in the param you pass to Swal, as shown here https://github.com/sweetalert2/sweetalert2/blob/master/sweetalert2.d.ts#L442

Upvotes: 2

Related Questions