I am using typescript to create a very simple web application. Right now, all it will do is create a rectangle and display an informational toast of the area. Unfortunately, the toast never appears. The line of code is executed and there are no errors or warnings in the dev tools for either Internet Explorer or Google Chrome. Here is what I have:
Typescript:
/// <reference path="../typings/toastr/toastr.d.ts" />
interface IRectangle {
height: number;
width: number;
getArea(): number;
}
module Shapes {
export class Rectangle implements IRectangle {
getArea(): number {
return this.height * this.width;
}
constructor(
public height: number,
public width: number) {
}
}
}
var rect: IRectangle = new Shapes.Rectangle(10, 4);
var area = rect.getArea();
toastr.info("area = " + area);
The resulting javascript is as follows:
/// <reference path="../typings/toastr/toastr.d.ts" />
var Shapes;
(function (Shapes) {
var Rectangle = (function () {
function Rectangle(height, width) {
this.height = height;
this.width = width;
}
Rectangle.prototype.getArea = function () {
return this.height * this.width;
};
return Rectangle;
})();
Shapes.Rectangle = Rectangle;
})(Shapes || (Shapes = {}));
var rect = new Shapes.Rectangle(10, 4);
var area = rect.getArea();
toastr.info("area = " + area);
//# sourceMappingURL=04-01-internal-module.js.ma
My HTML is only there to display the toast. It's as simple of an example as I can imagine, but it still doesn't work:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../scripts/jquery-1.6.3.js"></script>
<link href="../content/toastr.css" rel="stylesheet" />
<script src="../scripts/toastr.js"></script>
<script src="../scripts/app/04-02-internal-module.js"></script>
</head>
<body>
</body>
</html>
Like I said. The page loads just fine, but nothing happens. I know what I'm supposed to see because I've used the demo located here: http://codeseven.github.io/toastr/demo.html
But, nothing shows up. Any ideas what I'm doing wrong?
