I have encountered examples suggesting the possibility of achieving this, but my attempts have been unsuccessful. Working with Typescript 2.7.2 in our project where numerous extensions of dijit._Widget and dijit._TemplatedMixin are written in JavaScript, we are transitioning towards Typescript gradually. I have defined an interface that extends these two classes (along with others) with a constructor in a d.ts file. This interface is then extended in a class implemented in Typescript using AMD class definition syntax. I am declaring an extension of this class and attempting to utilize dojo/text! to load an HTML template within the extension. The content of form.d.ts is as follows:
/// <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>);
}
}
}
}
}
}
}
Contained in 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 _;
}
The AMD declaration for the extension reads as:
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;
Including the attempt at using dojo/text! in the extension code snippet below:
/// <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);
}
}
The use of amd-dependency comes into play due to the failure of importing dojo/text! during runtime when seeking the module, resulting in a "module not found" error. By using amd-dependency, template is explicitly defined as a string within the source, containing the HTML loaded by dojo/text!. The challenge arises because the call to super() in the constructor must precede other lines of code, yet it relies on templateString being set. However, the assignment of templateString occurs after the constructor's return.
Any insights or assistance would be greatly appreciated. Additional information can be provided upon request. Thank you for your help.