在打字稿中使用 requireJS 的正确方法是什么? [英] What's the correct way to use requireJS with typescript?

问题描述

我在这里找到的示例和这里 说使用 module().但是，当我编译时，我收到警告 TS7021: 'module(...)' 已弃用.改用 'require(...)'."

The examples I have found here and here say to use module(). However, when I compile I get "warning TS7021: 'module(...)' is deprecated. Use 'require(...)' instead."

那么几个基本问​​题:

So a couple of basic questions:

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

1. When using typescript and requireJS, how do I access a class in one .ts file from another .ts file where requireJS will load the second file and give me the class in the first file?
2. Is there a way to do the standard requireJS approach with two .ts files where the define() at the top loads the second ts file and returns back the object it builds at the end?
3. Sort-of the same as question #2. From a java script file, can I use the define() construct on a type script file to get the instantiated object? If so, how?

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

Update: The following gives me a tsc compile error:

///<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 {

推荐答案

我会评论 David 对 basarat 的回答(关于模块和类)的回复，但我没有声誉.我知道这个问题已经过时了，但我在其他地方没有找到答案.

I would have commented on David's reply to basarat's answer (regarding modules and classes), but I don't have the reputation. I know this question is stale, but I didn't find an answer elsewhere.

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

I succeeded by using basarat's videos, combined with some other resources, to figure it out for classes like David Thielen needed. Note that I no longer have entries for my ts source files, but I do have amd-dependency and import statements. In Eclipse with palantir's TS plugin, my code completion and ability to jump from usage to definition is working with just the amd-dependency and import statements. The header files still need statements since they have nothing to do with deployment and are only used by the TS compiler. Note also that the .ts file extensions are used for reference statements but not the amd and import statements.

在 Utils.ts 我有:

In Utils.ts I have:

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

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

在 OntologyRenderScaler 中，我有:

In OntologyRenderScaler I have:

///<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();
...
}

在 OntologyMappingOverview.ts 中，我有:

In OntologyMappingOverview.ts I have:

///<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);
...
}

我没有设法(还！)让事情像上面建议的 codeBelt 那样工作，但是我们在他的博客上的交流表明，如果我让他的方法起作用(在文件底部使用 export MyClass)，那么我不需要将导入的标识符与类名加倍.我想它会导出感兴趣的类而不是它定义的命名空间(隐式外部模块，即 TypeScript 文件名).

I didn't manage (yet!) to get things working like codeBelt suggested above, but an exchange we had on his blog revealed that if I get his approach working (with export MyClass at the bottom of the file), then I would not need to double up the imported identifer with the class name. I suppose it would export the class of interest rather than the namespace it is defined in (the implicit external module, i.e. the TypeScript file name).

这篇关于在打字稿中使用 requireJS 的正确方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！