CODEWITHSUNDEEP
javascript.netruntime-errortypescript
Raheel Khan
Raheel Khan

Reputation: 14787

TypeScript run-time error 'undefined'

I have the following HTML + TypeScript that tries to instantiate a simple class called Point. When the hyperlink is clicked, I get the following errors against each try/catch clause:

Errors:

HTML:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <script src="app.js"></script>
    <script type="text/javascript">
        function Test()
        {
            try { alert(MyLibrary.Point.Empty.ToString()); }
            catch (e) { alert(e.message); }

            try { alert(new MyLibrary.Point(10, 20).ToString()); }
            catch (e) { alert(e.message); }

            try { alert(MyLibrary.Point.FromPoint(new MyLibrary.Point(10, 20)).ToString()); }
            catch (e) { alert(e.message); }
        }
    </script>
</head>
<body>
    <a href="javascript:Test();">Click Me</a>
</body>
</html>

TypeScript:

module MyLibrary
{
    export interface IPoint { X: number; Y: number; ToString(): string; }

    export class Point implements MyLibrary.IPoint
    {
        private _X: number = 0;
        private _Y: number = 0;

        constructor(x: number, y: number)
        {
            this._X = x;
            this._Y = y;
        }

        public get X(): number { return (this._X); }
        public get Y(): number { return (this._Y); }

        public ToString(): string
        {
            return ("{" + this._X.toString() + "," + this._Y.toString() + "}");
        }

        public static FromPoint(point: MyLibrary.Point): MyLibrary.Point
        {
            return (new MyLibrary.Point(point.X, point.Y));
        }

        private static _Empty: MyLibrary.Point = new MyLibrary.Point(0, 0);
        public static get Empty(): MyLibrary.Point { return (MyLibrary.Point._Empty); }
    }
}

The TypeScript compiles fine and the project targets ECMA5. Not sure what is going on under the hood.

UPDATE: The code starts to work if I remove the static properties from the class. Any ideas why that is? the generated JavaScript for the static properties is as follows:

Object.defineProperty(Point, "Empty", {
    get: function ()
    {
        return (MyLibrary.Point._Empty);
    },
    enumerable: true,
    configurable: true
});
Point._Empty = new MyLibrary.Point(0, 0);

Upvotes: 0

Views: 3508

Answers (2)

Ryan Cavanaugh
Ryan Cavanaugh

Reputation: 220994

You can't refer to the qualified name of a class inside a module during the initialization of its static members -- the class is not yet available by that name. Change these two lines:

    private static _Empty: MyLibrary.Point = new MyLibrary.Point(0, 0);
    public static get Empty(): MyLibrary.Point { return (MyLibrary.Point._Empty); }

To this

    private static _Empty: MyLibrary.Point = new Point(0, 0);
    public static get Empty(): MyLibrary.Point { return (Point._Empty); }

If you inspect the code generated you can see that the property MyLibrary.Point only gets set after the static initialization of the class occurs. This might be considered a compiler bug.

Upvotes: 2

Jeffery Grajkowski
Jeffery Grajkowski

Reputation: 4061

Judging from the error messages the module MyLibrary is defined at run time but the class Point inside of it is not. I'm guessing the JS file Point is in isn't being loaded.

Because you're not using modules each JS file with classes you want to use has to be referenced at the top your HTML file. Consider using the --out FILE compile option to compile all your classes to a single file so you only need refer to that one file.

Upvotes: 1

Related Questions