在 Typescript 类中使用 dojo/text!

我看到过一些例子暗示这是可能的，但我没有成功。我正在使用 Typescript 2.7.2。我们的项目有很多用 JavaScript 编写的 dijit._Widget 和 dijit._TemplatedMixin 的扩展。我们正在逐步迁移到 Typescript。我在一个 d.ts 文件中创建了一个接口，该接口扩展了这两个类（以及其他类），并带有构造函数，然后在使用 AMD 类定义语法的 Typescript 类中扩展该接口。我正在声明这个类的一个扩展，并尝试在扩展中使用 dojo/text! 来加载 HTML 模板。这是 form.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>);
            }

          }
        }
      }
    }
  }
}

这是 modules.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。问题是，构造函数中的 super() 调用必须是代码的第一行，而 super 构造函数依赖于 templateString 已经被建立。当然，实例变量 templateString 直到构造函数返回后才会被赋值为 template。我非常希望得到这方面的帮助。如果我可以提供更多信息，请告诉我。感谢所有人。

答案＃1

我通过进行以下更改使其工作：对于扩展的 AMD 声明：

class TSModelObjectMainFormView {
  templateString: string;
  inherited: (args: Object) => any;

  constructor(args?: any) {
    if (args && args.templateString) {
      this.templateString = args.templateString;
      this.inherited(arguments);
    }
  }
}

以及对扩展 TSModelObjectMainFormView 的 TypeScript 类：

constructor(args: any) {
  super(lang.mixin(args, {templateString: template}));
}

我确定有更好的方法。我很希望能收到一些建议。这仍然在使用 amd-dependency，据我了解，它已经被弃用了。