gitvisual-studiotypescriptvisual-studio-2015typescript1.6

Typescripts - Uncaught ReferenceError: toastr is not defined

Can someone help me. I made a simple project in TypeScripts using Microsoft Visual Studio 2015, to which I added 2 libraries "toastr" and "jquery" from the git repository: https://github.com/DefinitelyTyped/DefinitelyTyped. Once added, Visual Studio shows no error or warning at all (like in the picture Visual Studio Screen ). But when I run the the app, this is what i receive: Uncaught ReferenceError: toastr is not defined.

... and the 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");
};

enter image description here

Solution

  • You've added references to the toastr type definitions however you haven't actually referenced the toastr or jquery js library. So add the toastr.js and css file to your html (more info here https://github.com/CodeSeven/toastr). For example in the head element:

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

    And then after the content

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

    Take a look at the html in the example, to give you a better idea of what it should loook like: http://codeseven.github.io/toastr/demo.html

    So, just to clarify: the *.d.ts files simply tell the TypeScript compiler about the types in the external files you are referencing (for design time compilation). They don't actually pull in any js for the run time.