TypeScript Import casing matters

Comments | Share

I have a TypeScript class with PascalCasing, but the file name was camelCasing.ts  (to match our other existing js files) and my TypeScript wouldn’t complied in our Gated Check-in build. It turns out that this is converted to a RequireJs define call, which looks at the filename, not the class name. That took awhile and help from team members to figure out. I hope you can avoid losing time like I did.

Here’s a quick example:

// my Typescript model, file name is webCam.ts
class WebCam {
    id: string;
    title: string;
    ipAddress: string;
    webCamTypeId: string;
    constructor(id: string, title:string, ipAddress:string, webCamTypeId:string) {
        this.id = id;
        this.title = title;
        this.ipAddress = ipAddress;
        this.webCamTypeId = webCamTypeId;
    }
}

export = WebCam;

// TypeScript view model requiring the webCam module (not the camelCasing)
import WebCam = require('./webCam');
class WebCamViewModel {
    webCam: WebCam;
    constructor() {
        this.webCam = new WebCam("1", "test", "127.0.0.1", "1");
    }
}

export = WebCamViewModel;

// output of the generated JS
define(["require", "exports", './webCam'], function(require, exports, WebCam) {
    var WebCamViewModel = (function () {
        function WebCamViewModel() {
            this.webCam = new WebCam();
        }
        return WebCamViewModel;
    })();

    
    return WebCamViewModel;
});
//# sourceMappingURL=webCamsViewModel.js.map