Машинописные тексты — Uncaught ReferenceError: toastr не определен

Кто-нибудь может мне помочь. Я сделал простой проект на TypeScripts с помощью Microsoft Visual Studio 2015, в который добавил 2 библиотеки "toastr" и "jquery" из репозитория git: https://github.com/DefinitelyTyped/DefinitelyTyped. После добавления Visual Studio вообще не показывает ошибок или предупреждений (как на картинке Экран Visual Studio). Но когда я запускаю приложение, я получаю следующее: Uncaught 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");
};

введите здесь описание изображения


person Greşanu Emanuel - Vasile    schedule 21.06.2016    source источник


Ответы (1)


Вы добавили ссылки на определения типа toastr, но фактически не ссылались на библиотеку toastr или jquery js. Поэтому добавьте файл toastr.js и css в свой html (дополнительная информация здесь https://github.com/CodeSeven/toastr ). Например, в элементе head:

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

А потом после содержания

<script src="build/toastr.min.js"></script>

Взгляните на HTML-код в примере, чтобы лучше понять, как он должен выглядеть: http://codeseven.github.io/toastr/demo.html

Итак, просто для уточнения: файлы *.d.ts просто сообщают компилятору TypeScript о типах во внешних файлах, на которые вы ссылаетесь (для компиляции во время разработки). На самом деле они не используют js во время выполнения.

person Ross Scott    schedule 21.06.2016
comment
Не могли бы вы отметить это как правильный ответ, пожалуйста. Спасибо - person Ross Scott; 22.06.2016