TypeScript 中是否有用于 HTMLElements 的对象初始化器？答案

【问题标题】：Are there object initializers for HTMLElements in TypeScript?TypeScript 中是否有用于 HTMLElements 的对象初始化器？
【发布时间】：2016-03-16 11:20:38
【问题描述】：

代替这段代码：

let img = document.createElement("img");
img.src = "foo.png";
img.className = "bar";
img.id = "abc123";

我想做这样的事情：

let img = document.createElement("img")
{
    src = "foo.png";
    className = "bar";
    id = "abc123";
}

我知道我可以编写一个函数或构造函数来执行此操作，但只是想知道 TypeScript 中是否有某种本机支持？

【问题讨论】：

标签： html typescript object-initializers

【解决方案1】：

TypeScript 中没有对此的原生支持。内置的HTMLImageElement 接口不适合用作选项对象，因为它没有选项。 TypeScript 中没有原生支持的原因是因为 JavaScript 中确实没有原生支持。在元素创建期间不能传入选项对象。

不过，自己写这个很简单：

export interface CreateImgOptions {
    src: string;
    className?: string;
    id?: string;
}

export function createImg(options: CreateImgOptions): HTMLImageElement {
    let img = <HTMLImageElement> document.createElement("img")
    img.src = options.src;
    if (options.className) img.className = options.className;
    if (options.id) img.id = options.id;
    return img;
}

用法：

let img = createImg({
    src: "foo.png",
    className: "bar",
    id: "abc123"
});
let img2 = createImg({src: "foo2.png"});

【讨论】：

谢谢，你解释为什么它不存在是有道理的。

【解决方案2】：

是的，从某种意义上说……

export class newImgModel{
   src: string = "foo.png";
   className:string = "bar";
   id: string = "abc123";
}

所以你可以像这样创建一个元素：

创建一个类来处理它：

class Dynamically_create_element
{
    thingToAdd:newImgModel;
    Create_Element(thingToAdd)
    {
    var element = document.createElement("img");
    //Assign different attributes to the element.
    element.setAttribute("src", thingToAdd.src);
    element.setAttribute("class",thingToAdd.className);
    element.setAttribute("id", thingToAdd.id);
    document.body.appendChild(element);
    }

}

然后你可以这样使用：

var objToAdd = new newImgModel();
var create = new Dynamically_create_element();
create.Create_Element(objToAdd );

这应该可以解决问题..但我还没有测试过！

参考：CS-Corner

【讨论】：

创建图像的工作量太大了。您必须为每个图像创建和导出一个新类，这不能动态完成，并且它不使用选项对象。