Sweetalert: Types of property 'buttons' are incompatible

[burakkilic]

Hi,

I'm getting "Types of property 'buttons' are incompatible" error in my component. Here is the code and error:

`delete(id, $index) {
    swal({
        title: "Are you sure?",
        text: "Are you sure to delete the menu? It cannot be undone.",
        icon: "warning",
        dangerMode: true,
        buttons: {
            cancel: "Cancel",
            ok: "OK"
        }
    })
        .then(willDelete => {
            if (willDelete) {
                Helpers.setLoading(true);
                this.service
                    .delete({ _id: id})
                    .subscribe(data => {
                        if (data.type) {
                            this.cars.splice($index, 1);
                            Helpers.setLoading(false);
                        }
                    });
            }
        });

    }`

I'm getting

Argument of type '{ title: string; text: string; icon: string; dangerMode: true; buttons: { cancel: string; ok: str...' is not assignableto parameter of type 'string | Partial<SwalOptions>'. Type '{ title: string; text: string; icon: string; dangerMode: true; buttons: { cancel: string; ok: str...' is not assignable to type 'Partial<SwalOptions>'. Types of property 'buttons' are incompatible. Type '{ cancel: string; ok: string; }' is not assignable to type 'ButtonList'. Property 'cancel' is incompatible with index signature. Type 'string' is not assignable to type 'ButtonOptions'.

What can be the reason?

[alex-osman]

buttons: [true, true] will give the default cancel and ok
buttons: ['Cancel', 'Ok'] will give buttons named Cancel and Ok

[burakkilic]

Error became like:

error TS2345: Argument of type '{ title: string; text: string; icon: string; dangerMode: true; buttons: boolean[]; }' is not assignable to parameter oftype 'string | Partial<SwalOptions>'. Type '{ title: string; text: string; icon: string; dangerMode: true; buttons: boolean[]; }' is not assignable to type 'Partial<SwalOptions>'. Types of property 'buttons' are incompatible. Type 'boolean[]' is not assignable to type 'ButtonList'. Index signature is missing in type 'boolean[]'.

[alex-osman]

You are facing a typescript error, make sure to follow these types

export interface ButtonOptions {
  visible: boolean,
  text: string,
  value: any,
  className: string,
  closeModal: boolean,
};

export interface ButtonList {
  [buttonNamespace: string]: ButtonOptions,
};

It seems buttons: cannot be a boolean array, but it must be a ButtonList.
You may try

buttons: {
  cancel: { text: 'Cancel' },
  confirm: { text: 'Confirm' },
}

[burakkilic]

Why should I add this code? I couldn't get what I have to do

[splitt3r]

Why aren´t the options optional in typescript? You have to pass all values instead of the ones you need. jQuery for example does it like:

interface DialogOptions {
    closeBtn?: string;
    closeBtnText?: string;
    corners?: boolean;
    initSelector?: string;
    overlayTheme?: string;
}

[t4t5]

@splitt3r You're right, they should definitely be optional. If anyone wants to send a pull request to fix this, feel free to!

[kipkemoimayor]

### This will work

swal("you liked it",{ buttons:{cancel:false,confirm:false}, timer:1000, })

[ricnef2121]

swal({
        title: "Are you sure?",
        text: "Are you sure to delete the menu? It cannot be undone.",
        icon: "warning",
        dangerMode: true,
        buttons: {
            cancel: "Cancel",
            ok: "OK"
        }
    } as any)

[pshoraciozevallosafiliaciones]

Thanks, I worked with Angular 10 , Swal.fire({
title: 'Espere',
text: 'Guardando informacion',
ty: 'info',
allowOutsideClick: false
}as any);
Swal.showLoading();