javascript - 将 Sweet alert 与 Typescript 类一起使用

Question

我在 typescript 类中有一个方法，看起来像这样

    var confirmation = confirm("Run Agent Job?");
    if (confirmation) {
        console.log('yes');
    } else {
        console.log('no');
    }

我正在尝试将其转换为使用 Sweet Alert，因此我将其放入方法中。但是 Typescript 无法识别它抛出一个 Cannot find name swal

swal("hello");

我已经导入了 sweet alert 如下

<link href="~/Content/css/sweetalert.css" rel="stylesheet" />
<script src="~/Scripts/sweetalert.min.js"></script>

我做错了什么？如果我尝试在一个普通的 *.js 文件中使用 swal()，它会工作正常。仅当它位于 *.ts 文件中时。

Answer 1

typescript

我通过以下方式让它与 typescript 一起工作。在你的 .ts 文件的顶部使用:

import * as swal from 'sweetalert';

然后像这样使用函数

swal({
  title: "Are you sure?",
  text: "You will not be able to undo this action",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, delete it!",
  closeOnConfirm: true
},
confirmed => {
   if(confirmed) {
       // Do what ever when the user click on the 'Yes, delete it' button
   }
});

您可以在 docs 中找到更多示例.

通过 npm 和 typings 安装

我通过 npm 安装了 sweetalert 包

npm install sweetalert --save

和打字

// the old way
typings install dt~sweetalert --save --global 

// new way
npm install --save @types/sweetalert

在此之后，确保您已将 js 和 css 文件包含在您的 index.html 中。

如果出现以下错误

swal(..) is not a function

那么你没有正确包含js文件。

对于 aurelia CLI 用户

您可以将以下内容添加到您的 aurelia.json。

      {
        "name": "sweetalert",
        "path": "../node_modules/sweetalert",
        "main": "dist/sweetalert.min",
        "resources": [
          "dist/sweetalert.css"
        ]
      },

并在 app.html 中使用

<require from="sweetalert/dist/sweetalert.css"></require>