Why would the TypeScript compiler issue error “The name m does not exist in the current scope” in Logger.ts even though it is able to resolve Model.LogMessage defined LogMessage.ts
These are the associated files:
Logger.ts:
///<reference path="Utils.ts"/>
/// <reference path="../Models/LogMessage.ts"/>
/// <reference path="JqGridUtilities.ts"/>
module Utilities {
declare var $;
import m = Model;
//import jqu = Utilities;
export class Logger {
static logs: m.LogMessage[]; // how to do typed array????
logs1: m.LogMessage[];
static logsGridClass = "jqgdash_logs";
static gridName = "jqgdash";
static logsGridHeader = "Info Center";
static displayDataOnConsole(gridClass : string, gridHeader : string, theData) {
if (theData != null && theData.length > 0) {
var grid = $("#" + gridName);
if (gridClass === logsGridClass) {
if (!grid.hasClass(logsGridClass)) {
GridUtils.reconfigureGrid(gridName, gridHeader, theData);
grid.addClass(logsGridClass);
} else {
GridUtils.addDataToGrid(gridName, gridHeader, theData);
}
} else {
if (grid.hasClass(logsGridClass)) {
grid.removeClass(logsGridClass);
}
GridUtils.reconfigureGrid(this.gridName, gridHeader, theData);
}
}
}
static createErrorLogs(messages : string) : m.LogMessage[] {
if (messages == null) return [];
$.each(messages, function (i, msg) {
logs.push(this.createLogJson("error", msg));
});
return logs;
}
static logMessageToConsole (severity : string, message : string) {
this.logs.push(this.createLogJson(severity, message));
}
}
}
LogMessage.ts:
module Model {
export class LogMessage {
message: string;
timeStamp: Date;
severity: string;
constructor (severity : string, message: string, date: Date) {
this.message = message;
this.timeStamp = date;
this.severity = severity;
}
}
}
and Utils.ts:
module Utils {
declare var tut;
export var liveString = "http://" + window.location.host + '/trackutransit';
export function executeAjaxPostJsonCall(url : string, success : any ) {
return $.ajax(url,
{
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
error: tut.Logger.displayAjaxError,
success : success });
}
export function getResourcePath(relativePath: string): string {
return liveString + relativePath;
}
export function isMobile(): bool {
var index = navigator.appVersion.indexOf("Mobile");
return (index > -1);
}
}
JQGridUtilities.ts is defined in the same folder as Logger.ts as follows:
///<reference path="Utils.ts"/>
module Utilities{
declare var jqGrid;
declare var $;
//import t = TrackuTransit;
export class GridUtils {
static instance = new GridUtils();
constructor() { }
static isUserFriendlyField(key : string) : bool {
return true;
}
// Extracts the fields from this Json object
static extractColumnsFromJsonObject(obj) : any[]{
var columns = new Array();
if (obj) {
for (var key in obj) {
if (isUserFriendlyField(key)) {
columns.push(key);
}
}
}
return columns;
}
static addDataToGrid(gridId, gridHeader, data) {
if (data != null) {
var grid = $("#" + gridId);
for (var i = 0; i < data.length; i++) {
grid.jqGrid('addRowData', i, data[i]);
}
}
}
static createColumnModels(columns) : any[]{
var model = [];
$.each(columns, function (i, column) {
if (this.isUserFriendlyField(column)) {
if (column === "icon" || column === "image") {
model.splice(0, 0, { name: column, label: ' ', width: 16, formatter: function (cellvalue, options, rowObjects) {
return "<img src='" + cellvalue + "' width='16px' height='16px'/>";
}
});
}
else if (column === "Severity") {
model.splice(0, 0, {
name: column,
label: ' ',
width: 20,
formatter: function (cellvalue, options, rowObjects) {
var imagePath = Utils.liveString + '/Content/images/' + cellvalue + '.png';
return "<img src='" + imagePath + "' width='16px' height='16px'/>";
}
});
}
else {
if (column === "display_name") {
model.splice(0, 0, { name: column, label: "name" });
} else {
model.push({ name: column, label: column, width: 70 });
}
}
}
});
return model;
}
static reconfigureGrid(gridName, gridHeader, theData) {
if (!gridName)
throw ("grid name must be specified");
if (gridHeader, theData != null && gridHeader, theData.length > 0) {
var columns = extractColumnsFromJsonObject(theData[0]);
var colsModel = createColumnModels(columns);
// todo: report unable to chain jQuery methods as bug for jqGrid
$("#" + gridName).jqGrid('GridUnload');
$("#" + gridName).jqGrid({
datatype: "local",
data: theData,
autowidth: true,
colModel: colsModel,
pager: '#pager',
rowNum: 10,
rowList: [5, 10, 20, 50],
height: 120, // constant height allows grid navigator to show, if parent div is constant height
width: '100%',
viewrecords: true,
caption: gridHeader
});
}
}
}
}
If I remove reference to JqGridUtilities.ts in Logger.ts, the error disappears but now GridUtils can no longer be resolved. If I define GridUtils using a different module name, say, jqGridUtilities instead of Utilities, I no longer get this error. Why is this?
This is what I have based on your examples…
It looks like you are going for a bundling strategy… i.e. you are asking TypeScript to leave how the JavaScript gets loaded to you. You will either add all the scripts to the page or you’ll bundle them into a single file and minify it.
When you do this, you can pretty much ignore the
importkeyword and just usereferencecomments to describe the files that you will make available at runtime.With this in mind, here is your Logger.ts file
The changes are mainly the absence of the
importstatements, but I have also shown how you instantiate a typed array (you just follow the declaration with= [].