如何在 TypeScript 中新建一个类

Question

我是 TypeScript 新手，但在 C# 方面经验丰富。我正在尝试做一些非常简单的事情，但我错过了一些基本的东西。我正在使用量角器在 Angular 前端编写用户测试。我正在使用页面对象模式，并且我想将页面对象保存在与我的用户测试不同的文件中，以便我可以在多个用户测试文件之间共享页面对象。

当我尝试新建类时，我不断收到错误消息说页面对象类不是函数。我究竟做错了什么？这是我因错误而失败的代码：

TypeError：UserTests.DashboardPage 不是函数。

页面对象文件：名为dashboard.pageobject.ts

module UserTests {
    export class DashboardPage {
        setupPage = function () {
            console.log("setupPage function");
        };
    }
}

量角器测试文件：名称dashboard.test1.spec.ts

/// <reference path="../../../typings/jasmine.d.ts" />
/// <reference path="../../../typings/angular-protractor.d.ts" />
/// <reference path="../../../typings/selenium-webdriver.d.ts" />
/// <reference path="dashboard.pageobject.ts" />

module UserTests {
    describe('When testing the Dashboard page', function() {
        it('Should pass', function () {
            var page = new UserTests.DashboardPage();
        });
    });
}

出现错误就行了：var page = new UserTests.DashboardPage();

更新（2015 年 11 月 17 日）：

在阅读了 basarat 关于internal 模块的回复后，我终于把所有的部分放在一起。我从页面对象文件中删除了 module 关键字，公开了 setupPage 方法，并在 spec 文件中添加了 import 语句。阅读外部模块让我意识到 Node 已经将每个文件视为一个模块。 This 帖子（也由 basarat 发布）将这一点带回家让我公开该功能。另外，我安装了 RequireJS。这是我的最终代码。

页面对象文件：

export class DashboardPage {
    public setupPage = function () {
        console.log("setupPage function");
    };
}

量角器测试文件：

/// <reference path="../../../typings/jasmine.d.ts" />
/// <reference path="../../../typings/angular-protractor.d.ts" />
/// <reference path="../../../typings/selenium-webdriver.d.ts" />

import pageObj = require("./dashboard.pageobject");

describe('When testing the Dashboard page', function() {
    it('Should pass', function () {
        var page = new pageObj.DashboardPage();
        page.setupPage();
        console.log('I made it!');
    });
});

感谢回复的人！！

Answer 1

非常感谢任何帮助！谢谢！

您正在使用 internal 模块（又名命名空间）。这意味着您需要以正确的顺序加载文件或以正确的顺序连接文件。这就是这里出了问题。

更多信息：https://github.com/TypeStrong/atom-typescript/blob/master/docs/out.md

Answer 2

根据this GitHub issue，Typescript 支持在 Protractor 的Upcoming milestone 中。因此，同时您可以在运行测试之前将您的 Typescript 代码编译为 JavaScript。

步骤如下：

1. 用--outFile编译规范文件dashboard.test1.spec.ts：

   tsc dashboard.test1.spec.ts --outFile dashboard.test1.spec.out.js
   

2. 在 Protractor 配置文件中使用新创建的 dashboard.test1.spec.out.js 文件。

当然，除了dashboard.test1.spec.out.js，您可以使用任何您认为方便的名称（但您必须指定输出名称）。

两个澄清：

• 当您使用--outFile 选项时，编译器将递归地跟踪所有引用标记（/// <reference path="file-name.ts" />），然后将所有引用的 Typescript 文件的编译后的 JavaScript 输出到单个文件（最深的引用将在顶部）。
• 您可以使用--out 代替--outFile。 --out 已被 --outFile 弃用（参见 Typescript compiler options），但 both should work just fine。