我遇到了同样的问题,对我来说是一个转译器问题。
TL;DR 如果您使用 import * as WidgetName from '<path>' 语法导入某些内容并且不在 js 中使用 WidgetName(就像您对模板中的小部件所做的那样),则转译器赢了不要导入它。请改用import '<path>'。
长答案:这是我第一次使用 TypeScript,同样,我正在将一个 dojo 项目转换为 TypeScript。希望能帮助到更多的人,我会放几个步骤来帮助我正确导入模块。
步骤 0dojoConfig 包
在 dojoConfig 上定义你自己的包是行不通的,必须使用相对路径来引用模块。
要清楚,用这个例子:
dojoConfig = {
...
packages : [ { name : "myproject", location : "js/myproject" },
{ name : "dojo", location : dojoBase+"dojo" },
{ name : "dijit", location : dojoBase+"dijit" },
{ name : "dojox", location : dojoBase+"dojox" } ]
};
不可能使用import * as WidgetName from 'myproject/WidgetName' 方法让小部件相互导入,而是您必须使用import * as WidgetName from './WidgetName'(注意'.' 与'myproject')。
第 1 步:导入 dojo 声明(据我所知,不是强制性的)
我依赖节点,我使用npm install dojo-typings --save-dev 提取了 dojo-typing。在files 属性中,我指定了[ "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" ]。
第 2 步:使用转译器上的正确选项:
{
"target": "es5",
"allowJs": true,
"module": "amd",
"moduleResolution": "classic",
"noImplicitUseStrict" : true
},
noImplicitUseStrict 解决了错误 dojo/parser::parse() 错误 TypeError: 'caller', 'callee', and 'arguments' properties may not be access on strict mode functions 或 arguments 对象的调用给他们。 allowJs 允许我将 TypeScript 和原生 dojo 混合在一起。
第 3 步:使用导出返回
这是一个非常小的模块示例,它不需要/导入任何东西,而只导出一个log 方法(文件将是“toast.ts”):
const log = function(message) {
window['dojo'].publish("mainTopic",
[{
message: "<span style='font-size: 12px;'>" + message +"</span>",
type: 'info',
duration: 3000
}]
);
}
export { log }
为了完整起见,在纯 Dojo 中,您会编写类似(文件将是 'toast.js'):
define([ ],
function(){
var log = function(message) {
dojo.publish("mainTopic",
[{
message: "<span style='font-size: 12px;'>" + message +"</span>",
type: 'info',
duration: 3000
}]
);
};
return { log : log };
});
第 4 步:重写您的小部件并正确导入
我使用了一个 Main 小部件,它包含所有主体,这里是 Main.ts 的内容:
/// <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,
});
有不同类型的导入:
- 第一个是我最苦恼的一个,为了模板
-
import * as ... 是我在课堂上使用的一系列 dojo 对象
-
import '<path>' 用于我在模板中使用 data-dojo-type 声明的小部件
-
import name = require('<path>') 是另一种需要模块的方式
为了完整起见,这将是原始 Main.js 文件:
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,
});
});
结论:缺少构造函数很可能来自您导入模块的方式,检查转译代码帮助我了解问题所在。要成功导入,需要在各处保持一定的准确性(以上所有步骤都应提供概述)。
我仍在转换我的项目(可能会出现其他问题),但我希望这也有助于其他尝试将 TypeScript 与 Dojo 一起使用的可怜人!