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

有一個在打字稿對此沒有原生支持。因爲它沒有可選項，所以內置的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"}); 

Answer 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