typescript - 使用道场/文本!从 Typescript 类中

Question

我见过一些暗示可以做到这一点的例子，但我没有成功。我正在使用 Typescript 2.7.2。我们的项目有很多用 JavaScript 编写的 dijit._Widget 和 dijit._TemplatedMixin 的扩展。我们正在逐渐转向 Typescript。我创建了一个接口(interface)，该接口(interface)使用 d.ts 文件中的构造函数扩展这两个类(和其他类)，并使用 AMD 类定义语法在用 Typescript 编写的类中扩展该接口(interface)。我正在声明此类的扩展并尝试使用 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 代码根据带有 dojo/text 的资源的 url 生成一些唯一的 id!前缀，然后是数字，然后是 !，然后是 url 的其余部分。它在一组模块中查找，期望在执行导入的代码行中找到它，但失败了。未找到报告模块。有了 ams-dependency，template 实际上在源代码中定义为一个字符串，它包含 dojo/text 加载的 HTML!当调用类构造函数时。问题是，构造函数中对super()的调用必须在代码的第一行，而 super 构造函数依赖于已经建立的templateString。当然，实例变量 templateString 直到构造函数返回后才被赋予 template 的值。我非常感谢这方面的帮助。如果我可以提供更多信息，请告诉我。感谢所有人。

Answer 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 依赖项，据我所知，它已被弃用。