Category Archives: TypeScript

JavaScript runtime error: Unable to get property of undefined or null reference.

I randomly get this error when using TypeScript in ASP.NET MVC5 application.

Unhandled exception at line 15, column 5 in http://localhost:2425/theapp/Scripts/app.js?51
0x800a138f - JavaScript runtime error: Unable to get property 'prototype' of undefined or null reference

This is over the following automatically generated JavaScript:

var __extends = this.__extends || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};

This is a typical application calling main App.js in _Layout.cshtml as follows:

   <script src="@Url.Content("~/Scripts/app.js?51")"></script>

Turns out that if I manually increment the number after app.js the problem magically disappears. Why? I cannot say at this time…

Advertisements

Using javascript libs without TypeScript definition

Say you wanted to use Telerik’s HTML5 Report Viewer  in your TypeScript definition files and you cannot find the TypeScript definition file.   You are probably doing:

module ViewModel {

export class ReportViewModel {

constructor() {
this.init();
}

init() {

$(() => {

var reportViewer = jQuery("#reportViewer1");
if (reportViewer) {
reportViewer.telerik_ReportViewer({
serviceUrl: "/api/reports/",
templateUrl: 'kendo/ReportViewer/templates/telerikReportViewerTemplate-8.1.14.804.html',
reportSource: {
report: "Telerik.Reporting.Examples.CSharp.ProductCatalog, CSharp.ReportLibrary",
parameters: {
CultureID: "en"
}
}
});
}

});
}
}
}

However, without the TypeScript definition file, Visual Studio will complain that telerik_ReportViewer is not a property of jQuery.

You have two options:

1. Create an ambient variable for jQuery


declare var jQuery;

export class ReportViewModel {

just before the export class definition.  The disadvantage of this method is that you lose all IntelliSense for jQuery in Visual Studio.

2. Second option is to cast the result of the jQuery selector to any as follows:


var reportViewer = <any>jQuery("#reportViewer1");
if (reportViewer) {

The advantage of this method is that you continue working as normal without losing intellisense for jQuery.