Question

在我工作的公司，我们正在使用Dojo框架，最近我开始推动将它与TypeScript一起使用。我环顾四周，找到了关于这个话题的精彩文章，你可以在这里找到它： https://gregwiechec.com/2016/01/creating-dojo-widget-in-typescript/

此解决方案的最后两行是：

var exp = _declare("alloy.editors.StringListTs", [_Widget, _TemplatedMixin, _WidgetsInTemplateMixin, _CssStateMixin, _ValueRequiredMixin], new StringList());

export = exp;

我遵循相同的模式并且效果很好，除了2个问题，我似乎没有一个很好的可靠解决方案： 1.如果查看解决方案，在调用dojo declare方法时，需要实例化创建的类（这是因为dojo查看属性而不是原型）。 2.问题更多的问题是，我正在导出dojo声明的对象，而不是它自己的类。当你尝试导入类（typescript import）时，这是有问题的，即使我将变量exp声明为类类型，我得到一个错误，说我没有构造函数来尝试导入。

Answer 1

我遇到了同样的问题，对我而言，这是一个转录问题。

TL; DR 如果您使用import * as WidgetName from '<path>'语法导入内容并且不在js中使用WidgetName（就像您在某个窗口中使用import '<path>'一样模板），转换器不会导入它。请改用dojoConfig = { ... packages : [ { name : "myproject", location : "js/myproject" }, { name : "dojo", location : dojoBase+"dojo" }, { name : "dijit", location : dojoBase+"dijit" }, { name : "dojox", location : dojoBase+"dojox" } ] };。

答案很长：这是我第一次使用TypeScript，同样地，我将dojo项目转换为TypeScript。希望能帮助更多人，我会采取一些步骤帮助我正确导入模块。

第0步：dojoConfig包

在dojoConfig上定义自己的包无法正常工作，必须使用相对路径引用模块。

要清楚，请举例说明：

import * as WidgetName from 'myproject/WidgetName'

使用import * as WidgetName from './WidgetName'方法无法让小部件互相导入，而是必须npm install dojo-typings --save-dev（请注意＆＃39;。＆＃39; vs＆＃39 ; myproject的＆＃39）。

第1步：导入dojo声明（根据我的注意，不是强制性的）

我依赖节点，我使用files提取 dojo-typing 。在[ "src/js/**/*.ts", "src/js/**/*.js", "node_modules/dojo-typings/dojo/1.11/index.d.ts", "node_modules/dojo-typings/dojo/1.11/modules.d.ts", "node_modules/dojo-typings/dijit/1.11/index.d.ts", "node_modules/dojo-typings/dijit/1.11/modules.d.ts" ]属性中，我指定了{ "target": "es5", "allowJs": true, "module": "amd", "moduleResolution": "classic", "noImplicitUseStrict" : true },。

第2步：在转录程序中使用正确的选项：

noImplicitUseStrict

allowJs解决了错误 dojo / parser :: parse（）错误TypeError：＆＃39;来电者＆＃39;，＆＃39;被叫＆＃39;和＆＃39;参数＆＃ 39;可能无法在严格模式函数或调用它们的参数对象上访问属性。 log允许我将TypeScript和本机dojo混合在一起。

第3步：使用导出

返回

这是一个非常小的模块的例子，它不需要/导入任何东西，但只导出const log = function(message) { window['dojo'].publish("mainTopic", [{ message: "<span style='font-size: 12px;'>" + message +"</span>", type: 'info', duration: 3000 }] ); } export { log }方法（文件将是＆＃39; toast.ts＆＃39;）：< / p>

define([ ],

        function(){

    var log = function(message) {
        dojo.publish("mainTopic",
                [{
                    message: "<span style='font-size: 12px;'>" + message +"</span>",
                    type: 'info',
                    duration: 3000
                }]
            );
    };

    return { log : log };

});

为了完整性，在纯粹的Dojo中你会写出类似的东西（文件将是＆＃39; toast.js＆＃39;）：

/// <amd-dependency path="dojo/text!./Main.html" name="template" />
declare var template: string;

import * as _Widget from 'dijit/_Widget';
import * as _TemplatedMixin from 'dijit/_TemplatedMixin';
import * as _WidgetsInTemplateMixin from 'dijit/_WidgetsInTemplateMixin';
import * as dojoDeclare from 'dojo/_base/declare';

import './MyVanillaJavascriptWidget';
import './MyModule';
import 'dojox/widget/Toaster';

import toast = require('./utility/toast');

export default dojoDeclare("mm.Main", [ _Widget, _TemplatedMixin, _WidgetsInTemplateMixin ], {
    templateString : template,
});

第4步：重写小部件并正确导入

我使用一个Main小部件，它接收所有正文，这里是Main.ts的内容：

import * as ...

有不同类型的导入：

第一个是我最挣扎的那个，为模板
import '<path>'是我在类
import name = require('<path>')用于我使用data-dojo-type
define([ "dijit/_Widget", "dijit/_TemplatedMixin", "dijit/_WidgetsInTemplateMixin", "dojo/_base/declare", "dojo/text!./Main.html", "dojox/widget/Toaster", "./MyVanillaJavascriptWidget", "./MyModule" ], function( _Widget, _TemplatedMixin, _WidgetsInTemplateMixin, declare, mainTemplate, toast) { return declare("mm.Main", [ _Widget, _TemplatedMixin, _WidgetsInTemplateMixin ], { templateString : mainTemplate, }); });是另一种需要模块的方式

为了完整性，这将是原始的Main.js文件：

vowpal wabbit tool

结论：缺少的构造函数很可能来自导入模块的方式，检查已编译的代码有助于我了解问题所在。要成功导入，需要一点准确性（上面的所有步骤都应该给出概述）。

我仍然在转换我的项目（其他问题可能会出来），但我希望这也有助于其他可怜的灵魂尝试使用Dojo的TypeScript！

将TypeScript与Dojo一起使用 - 导入/导出问题

1 个答案: