Question

有人能帮助我吗？我使用Microsoft Visual Studio 2015在TypeScripts中创建了一个简单的项目，我在git存储库中添加了2个库“toastr”和“jquery”：https://github.com/DefinitelyTyped/DefinitelyTyped。添加后，Visual Studio根本不显示任何错误或警告（如图Visual Studio Screen中所示）。但是当我运行应用程序时，这就是我收到的：未捕获的ReferenceError：未定义toastr。

...和index.html：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="app.js"></script>
</head>
<body>
    <h1>TypeScript HTML App</h1>

    <div id="content"></div>
</body>
</html>

app.ts：

/// <reference path="toastr.d.ts" />


class Greeter {
    element: HTMLElement;
    span: HTMLElement;
    timerToken: number;

    constructor(element: HTMLElement) {
        this.element = element;
        this.element.innerHTML += "The time is: ";
        this.span = document.createElement('span');
        this.element.appendChild(this.span);
        this.span.innerText = new Date().toUTCString();
    }

    start() {
        this.timerToken = setInterval(() => this.span.innerHTML = new Date().toUTCString(), 500);
    }

    stop() {
        clearTimeout(this.timerToken);
    }

}

window.onload = () => {
    var el = document.getElementById('content');
    var greeter = new Greeter(el);
    greeter.start();
    toastr.info("ASDFGH");
};

Answer 1

您已经添加了对toastr类型定义的引用，但是您实际上没有引用toastr或jquery js库。所以将toastr.js和css文件添加到你的html（更多信息在这里https://github.com/CodeSeven/toastr）。例如，在head元素中：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
  <include
  layout="@layout/toolbar_actionbar" />
  <FrameLayout
  android:id="@+id/content_frame"
  android:layout_below="@+id/appbar"
  android:layout_width="match_parent"
  android:layout_height="wrap_content" />
</RelativeLayout>

然后是内容

<link href="build/toastr.min.css" rel="stylesheet" type="text/css">

看看示例中的html，让您更好地了解它应该是什么样的：http://codeseven.github.io/toastr/demo.html

因此，只是为了澄清：* .d.ts文件只是告诉TypeScript编译器您正在引用的外部文件中的类型（用于设计时编译）。它们实际上并没有为运行时间提供任何js。

Typescripts - 未捕获的ReferenceError：未定义toastr

1 个答案: