TypeScript 中是否有 HTMLElements 的对象初始值设定项？

Question

代替此代码：

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 中是否有某种原生支持？

Answer 1

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

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

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

创建一个 class 来处理它：

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

Answer 2

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"});

TypeScript 中是否有 HTMLElements 的对象初始值设定项？

Are there object initializers for HTMLElements in TypeScript?

html

object-initializers

typescript