Type Declaration Order in TypeScript

Question

Is TypeScript sensitive to the order of type declarations?

Changing the order of type causes an error inside Angular 2 (beta.0) which (AFAIK) is implemented using TypeScript itself (that's why this error seems so strange & irrelevant to me):

angular2-polyfills.js:138 Error: Cannot read property 'prototype' of undefined(…)

Assume we have a file t1.ts:

export class AuthResponse extends JsonResponse { }
export class JsonResponse {
    public code: ResultCode;
}
export enum ResultCode { }

When starting the app, we see the mentioned error, at client side. But if we reverse the order of declarations in this file, the error goes away (Just for the record, currently I'm moving forward, keeping this in mind & it works).

To reproduce this error we need five more files:

t2.ts:

import {AuthResponse, JsonResponse, ResultCode} from './t1'; // this order?

export class DummyAction {
    doSomething() {
        console.log('test, starting ...');

        var v = new AuthResponse();
        return v;
    }
}

app.component.ts:

import {Component, OnInit} from 'angular2/core';
import {DummyAction} from './components/t2';            

@Component({      
    selector: 'root-app',
    templateUrl: '/app/templates/app.html',
})
export class AppComponent implements OnInit {
    constructor() {
        var tester = new DummyAction();
        // tester.runTest();
    }

    ngOnInit() { }
}

app.html:

<h1>TEST</h1>

boot.ts:

import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';

bootstrap(AppComponent, []);

And index.html which is a bit larger but essentially, has the structure of index.html from tutorial on angular website.

I've reproduced the problem using the code provided in the question. — Kaveh Shahbazian, Jan 15 '16 at 16:28

score 16 · Accepted Answer · answered Jan 15 '16 at 12:59

16

TypeScript itself not sensitive, but this compiled to JS.

class A extends B {}
class B {}

In JS:

var A = (function (_super) { /* ... */ })(B);
var B = (function () { /* ... */  })();

B is undefined on line 1.

answered Jan 15 '16 at 12:59

vasa_c

976
2
11
17

6

TypeScript is not sensitive to declaration order, but *why* does it still choose to output such JavaScript code? It should know better than that. What am I missing here? – stakx - no longer contributing Dec 16 '16 at 16:40
1

"TypeScript itself not sensitive, but this compiled to JS." what does this mean? tsc is not compliant? – Paul Draper Jun 21 '17 at 03:07

score 9 · Answer 2 · edited May 23 '17 at 12:02

I have casted my vote for the vasa_c answer as it is the correct one. Below I would like to provide some more information on that matter so it will be easier for OP to understand the issue.

If we will take your sample code:

export class AuthResponse extends JsonResponse { }
export class JsonResponse {
    public code: ResultCode;
}
export enum ResultCode { }

And compile it - this is what the end result will be like:

var AuthResponse = (function (_super) {
    __extends(AuthResponse, _super);
    function AuthResponse() {
        _super.apply(this, arguments);
    }
    return AuthResponse;
})(JsonResponse);
exports.AuthResponse = AuthResponse;
var JsonResponse = (function () {
    function JsonResponse() {
    }
    return JsonResponse;
})();
exports.JsonResponse = JsonResponse;
(function (ResultCode) {
})(exports.ResultCode || (exports.ResultCode = {}));
var ResultCode = exports.ResultCode;

Note that the resulting code is not just function definitions. It is functions and variables. That make all the difference. Because you have both declarations and expressions. More on this matter and why with expressions in js order does matter you can read in this excellent post: JavaScript function declaration and evaluation order

Type Declaration Order in TypeScript

2 Answers2

Linked