使用requireJS和打字稿的正确方法是什么?

Dav*_*len 27 requirejs typescript

我在这里这里找到的例子说使用module().但是,当我编译时,我得到"警告TS7021:'module(...)'已被弃用.请改用'require(...)'."

所以有几个基本问​​题:

  1. 当使用typescript和requireJS时,如何从另一个.ts文件访问一个.ts文件中的类,其中requireJS将加载第二个文件并在第一个文件中给我这个类?
  2. 有没有办法用两个.ts文件做标准requireJS方法,其中顶部的define()加载第二个ts文件并返回它在结束时构建的对象?
  3. 排序与问题#2相同.从java脚本文件中,我可以在类型脚本文件上使用define()构造来获取实例化对象吗?如果是这样,怎么样?

更新:以下给出了一个tsc编译错误:

///<reference path='../../libs/ExtJS-4.2.0.d.ts' />
///<reference path='../../libs/require.d.ts' />

import fdm = require("./file-definitions");
require(["../../scripts/ribbon"], function () {

export module Menu {

    export class MainMenu {
Run Code Online (Sandbox Code Playgroud)

Eri*_*ric 12

我会评论David对basarat的答案(关于模块和课程)的回复,但我没有声誉.我知道这个问题很陈旧,但我没有在其他地方找到答案.

我成功地使用了basarat的视频,结合其他一些资源,为David Thielen所需的课程找到了答案.请注意,我不再拥有ts源文件的条目,但我确实有amd-dependency和import语句.在使用palantir的TS插件的Eclipse中,我的代码完成以及从使用跳转到定义的能力仅适用于amd-dependency和import语句.头文件仍然需要语句,因为它们与部署无关,仅由TS编译器使用.另请注意,.ts文件扩展名用于引用语句,但不用于amd和import语句.

在Utils.ts我有:

///<reference path="headers/require.d.ts" />

export function getTime(){
    var now = new Date();
    return now.getHours()+":"+now.getMinutes()+':'+now.getSeconds();
}
Run Code Online (Sandbox Code Playgroud)

在OntologyRenderScaler中我有:

///<reference path="headers/require.d.ts" />

///<reference path="headers/d3.d.ts" />
///<reference path="headers/jquery.d.ts" />

///<amd-dependency path="Utils" />

import Utils = require('./Utils');

export class OntologyRenderScaler {
...
Utils.getTime();
...
}
Run Code Online (Sandbox Code Playgroud)

在OntologyMappingOverview.ts中我有:

///<reference path="headers/require.d.ts" />

///<reference path="headers/d3.d.ts" />
///<reference path="headers/jquery.d.ts" />

///<amd-dependency path="Utils" />
///<amd-dependency path="OntologyGraph" />
///<amd-dependency path="OntologyFilterSliders" />
///<amd-dependency path="FetchFromApi" />
///<amd-dependency path="OntologyRenderScaler" />
///<amd-dependency path="GraphView" />

///<amd-dependency path="JQueryExtension" />

import Utils = require('./Utils');
import OntologyGraph = require('./OntologyGraph');
import OntologyRenderScaler = require('./OntologyRenderScaler');
import OntologyFilterSliders = require('./OntologyFilterSliders');
import GraphView = require('./GraphView');

export class OntologyMappingOverview extends GraphView.BaseGraphView implements GraphView.GraphView {
    ontologyGraph: OntologyGraph.OntologyGraph;
    renderScaler: OntologyRenderScaler.OntologyRenderScaler;
    filterSliders: OntologyFilterSliders.MappingRangeSliders;
...
this.renderScaler = new OntologyRenderScaler.OntologyRenderScaler(this.vis);
...
}
Run Code Online (Sandbox Code Playgroud)

我没有管理(还有!)让事情像上面提到的codeBelt一样工作,但我们在他的博客上进行的交流显示,如果我让他的方法工作(在文件底部导出MyClass),那么我就不会需要使用类名加倍导入的标识符.我想它会导出感兴趣的类而不是它定义的命名空间(隐式外部模块,即TypeScript文件名).

  • 如果你想避免加倍类名(即OntologyGraph.OntologyGraph),在OntologyGraph.ts中你可以从类前面删除导出,而是在文件的末尾添加一行:export = OntologyGraph; 然后它可以在引用它的文件中称为简单的OntologyGraph. (5认同)

bas*_*rat 6

用于:

当使用typescript和requireJS时,如何从另一个.ts文件访问一个.ts文件中的类,其中requireJS将加载第二个文件并在第一个文件中给我这个类?有没有办法用两个.ts文件做标准requireJS方法,其中顶部的define()加载第二个ts文件并返回它在结束时构建的对象?

简单地说

// from file a.ts
export class Foo{

}

// from file b.ts
// import 
import aFile = require('a')
// use: 
var bar = new aFile.Foo();
Run Code Online (Sandbox Code Playgroud)

并使用--module amdflag 编译这两个文件.

用于:

排序与问题#2相同.从java脚本文件中,我可以在类型脚本文件上使用define()构造来获取实例化对象吗?如果是这样,怎么样?

要使用b.js中的a.ts,只需:

// import as a dependency:
define(["require", "exports", 'a'], function(require, exports, aFile) {

    // use:
    var bar = new aFile.Foo();
});
Run Code Online (Sandbox Code Playgroud)

这类似于编译b.ts时的结果


cod*_*elt 5

您希望导出语句位于您正在创建的类下方。

// Base.ts
class Base {

    constructor() {
    }

    public createChildren():void {

    }
}

export = Base;
Run Code Online (Sandbox Code Playgroud)

然后要导入并使用到另一个类中,您可以执行以下操作:

// TestApp.ts
import Base = require("view/Base");

class TestApp extends Base {

    private _title:string = 'TypeScript AMD Boilerplate';

    constructor() {
        super();
    }

    public createChildren():void {

    }
}

export = TestApp;
Run Code Online (Sandbox Code Playgroud)