网站搜索

javascript - 在 sweetalert2 上设置类型时遇到一些问题


Typescript 在 toastMixin 变量和 animation 对象中给了我两个错误。我没有找到任何解决方法来解决它。

错误:

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)

代码:TS 在 let toastMixin 和 animation 对象上显示错误

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

答案#1

因为在你传递给 Swal 的参数中不应该有 animation 字段,如此处所示 https://github.com/sweetalert2/sweetalert2/blob/master/sweetalert2.d.ts#L442

答案#2

animation 参数已被移除,请改用 showClass 和 hideClass:

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>