无法在打字稿上设置 Sweetalert 选项

Question

Installed packages:

"@angular/core": "^4.0.0"
"typescript": "~2.3.3"
"sweetalert": "^2.0.8"
"@types/sweetalert": "^1.1.28"

How I'm using sweetalert:

import * as swal from "sweetalert";
//...
doSomething() {
    const options = {
        title: "Are you sure?",
        text: "Some text here!",
        type: "warning",
        showCancelButton: true,
        showConfirmButton: true
    };
    swal(options, (remove) => { });
}

I'm getting these errors:

• VSC IntelliSense:

'Argument of type '{ title: string; text: string; type: string; showCancelButton: boolean; showConfirmButton: boolea...' is not assignable to parameter of type 'Settings & PromtModalSettings'.
Type '{ title: string; text: string; type: string; showCancelButton: boolean; showConfirmButton: boolea...' is not assignable to type 'PromtModalSettings'. Types of property 'type' are incompatible. Type 'string' is not assignable to type 'PromtType'.' at: '101,14' source: 'ts'

• TypeScript compiles, but on browser console, I get this:

ERROR Error: SweetAlert: Unexpected 2nd argument (function (remove) {...

I tried setting the options type as SweetAlert.Settings & SweetAlert.AlertModalSettings , but I can't access the namespace SweerAlert , and also tried any . None of them worked.

How can I set these options to sweetalert?

TS type file.

Answer 1

Sweetalert does not need to install types. It already has it implemented. When installing types, I was getting a conflict between the orignal types, then getting errors. I just removed @types/sweetalert and everything worked just like the examples in their site .

Answer 2

A simple fix is :

Directly go to the project folder then \\node_modules\\sweetalert\\typings\\sweetalert.d.ts In this you will find this line

const swal: SweetAlert;

just delete or comment it.. The error is sorted..

Answer 3

Rather than messing with the node_modules why not simply cast the options as SweetAlertOptions:

 const options = {
        title: "Are you sure?",
        text: "Some text here!",
        type: "warning",
        showCancelButton: true,
        showConfirmButton: true
    } as SweetAlertOptions;