在TypeScript中键入声明顺序

Kav*_*ian 18 typescript

TypeScript对类型声明的顺序敏感吗?

更改类型的顺序会导致Angular 2(beta.0)中的错误,其中(AFAIK)是使用TypeScript本身实现的(这就是为什么这个错误看起来如此奇怪且与我无关):

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

假设我们有一个文件t1.ts:

export class AuthResponse extends JsonResponse { }
export class JsonResponse {
    public code: ResultCode;
}
export enum ResultCode { }
Run Code Online (Sandbox Code Playgroud)

启动应用程序时,我们会在客户端看到上述错误.但是如果我们在这个文件中颠倒声明的顺序,那么错误就会消失(只是为了记录,目前我正在向前推进,记住它并且它有效).

要重现此错误,我们还需要五个文件:

t2.ts:

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

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

        var v = new AuthResponse();
        return v;
    }
}
Run Code Online (Sandbox Code Playgroud)

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() { }
}
Run Code Online (Sandbox Code Playgroud)

app.html:

<h1>TEST</h1>
Run Code Online (Sandbox Code Playgroud)

boot.ts:

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

bootstrap(AppComponent, []);
Run Code Online (Sandbox Code Playgroud)

而且index.html它有点大,但基本上,有角度网站index.html教程的结构.

vas*_*a_c 13

TypeScript本身不敏感,但是这个编译成了JS.

class A extends B {}
class B {}
Run Code Online (Sandbox Code Playgroud)

在JS中:

var A = (function (_super) { /* ... */ })(B);
var B = (function () { /* ... */  })();
Run Code Online (Sandbox Code Playgroud)

B在第1行未定义.

  • TypeScript对声明顺序不敏感,但*为什么*它仍然选择输出这样的JavaScript代码?它应该比那更清楚.我在这里错过了什么? (6认同)

Ami*_*mid 8

我已经为vasa_c答案投了票,因为它是正确答案.下面我想提供一些关于这个问题的更多信息,以便OP更容易理解这个问题.

如果我们将采用您的示例代码:

export class AuthResponse extends JsonResponse { }
export class JsonResponse {
    public code: ResultCode;
}
export enum ResultCode { }
Run Code Online (Sandbox Code Playgroud)

并编译它 - 这就是最终结果:

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;
Run Code Online (Sandbox Code Playgroud)

请注意,生成的代码不仅仅是函数定义.它是函数和变量.这一切都有所不同.因为你有声明和表达式.关于这个问题的更多内容以及为什么js顺序中的表达式确实很重要,您可以阅读这篇优秀文章:JavaScript函数声明和评估顺序