我看过一些例子暗示这是可能的,但是我一直没有成功,我用的是Typescript 2.7.2,我们的项目有很多用JavaScript写的dijit._Widget和dijit._TemplatedMixin的扩展,我们在逐渐转向Typescript,我创建了一个接口扩展了这两个类(和其他),并使用AMD类定义语法在用Typescript编写的类中扩展该接口。我正在声明该类的扩展,并尝试使用dojo/text!在扩展中加载html模板。这是表格d.ts:
/// <reference path="../../../../../../../node_modules/dojo-typings/dojo/1.11/dojo.d.ts" />
/// <reference path="../../../../../../../node_modules/dojo- typings/dijit/1.11/dijit.d.ts" />
/// <reference path="../../../../../../../node_modules/@types/dom.generated.d.ts" />
declare namespace com {
namespace foo {
namespace bar {
namespace web {
namespace components {
namespace form {
interface ModelObjectMainFormView extends dijit._Widget, dijit._TemplatedMixin, dijit._WidgetsInTemplateMixin, dojo.Evented {
on(type: string | dojo.ExtensionEvent, func: dojo.EventListener | Function): dojo.WatchHandle;
emit(type: string | dojo.ExtensionEvent, ...events: any[]): boolean;
}
interface ModelObjectFormViewConstructor {
new (args: Array<any>);
}
}
}
}
}
}
}
这是模块。d.ts:
/// <reference path="index.d.ts" />
declare module 'com/foo/bar/web/components/form/ModelObjectMainFormView' {
type ModelObjectMainFormView = com.foo.bar.web.components.form.ModelObjectMainFormView;
const ModelObjectMainFormView: com.foo.bar.web.components.form.ModelObjectFormViewConstructor;
export = ModelObjectMainFormView;
}
declare module "dojo/text!*" {
var _: string;
export default _;
}
这是AMD的扩展声明:
import declare = require("dojo/_base/declare");
import ModelObjectMainFormView = require("com/foo/bar/web/components/form/ModelObjectMainFormView");
class TSModelObjectMainFormView {
inherited: (args: Object) => any;
}
var exp = declare("com.foo.bar.web.components.form.TSModelObjectMainFormView", [ModelObjectMainFormView], new TSModelObjectMainFormView());
export = exp;
这是尝试使用dojo/text!的扩展:
/// <amd-dependency path="dojo/text!com/foo/bar/web/workItems/configuration/forms/templates/ConfigurationWorkItemMainFormView.html" name="template" />
import * as aspect from 'dojo/aspect';
import * as domAttr from 'dojo/dom-attr';
import * as domClass from 'dojo/dom-class';
import * as domConstruct from 'dojo/dom-construct';
import * as lang from 'dojo/_base/lang';
import ModernizationUtil = require('com/foo/bar/rtc/web/util/ModernizationUtil');
import MimeTypes = require('com/foo/bar/web/scm/MimeTypes');
import * as TSModelObjectMainFormView from '../../../components/form/TSModelObjectMainFormView';
// import * as template from "dojo/text!com/foo/bar/web/workItems/configuration/forms/templates/ConfigurationWorkItemMainFormView.html";
let template: string;
export class ConfigurationWorkItemMainFormView extends TSModelObjectMainFormView {
templateString = template;
constructor(args?: any) {
super(args);
}
}
我使用ams-dependency是因为dojo/text!的导入在运行时尝试获取模块时失败。它找不到它。dojo代码基于资源的url生成一些唯一的id,其中dojo/text!是前缀,然后是数字,然后是!,然后是url的其余部分。它在模块集合中查找,希望在执行导入的代码行中找到它。这个方法失败了。找不到报告模块。使用ams-dependency,template实际上在源代码中被定义为字符串,并且它包含了在调用类构造函数时由dojo/text!加载的HTML。构造函数中的()必须是第一行代码,并且超级构造函数依赖于已经建立的templateString。当然,示例变量templateString直到构造函数返回后才被赋值为template。2我非常感谢你的帮助。3如果我能提供更多的信息,请告诉我。4感谢所有人。
1条答案
按热度按时间33qvvth11#
我通过进行以下更改来使其工作:对于AMD的扩展声明:
以及扩展TSModelObjectMainFormView的类型脚本类:
我确信有更好的方法。我很乐意得到一些建议。这仍然是使用amd依赖项,据我所知,它已经被弃用了。