Question

我看到一些例子暗示可以这样做，但我没有成功。我正在使用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代码根据带有dojo / text的资源的url生成一些唯一的id！前置，然后是数字，然后是！，然后是网址的其余部分。它查找了一组模块，希望在执行导入的代码行上找到它，然后失败。找不到报告模块。使用ams依赖，模板实际上在源中定义为字符串，它包含由dojo / text加载的HTML！何时调用类构造函数。问题是，构造函数中对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的类：

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

我确定有更好的方法。我很乐意接受一些建议。这仍然是使用amd-dependency，据我所知，它已被弃用。

使用道场/文字！来自Typescript类

1 个答案: