如何使用打字稿中的表單元素

Question

我想通過myForm.elements訪問表單元素，然後通過它的名稱訪問每個元素，例如myForm.elements.month。 Typescript不喜歡這個B/C它不知道form.elements包含month的屬性。我想，讓我們創建一個界面！所以，我沒有，（見下面的代碼），但我得到這個打字稿錯誤：Neither type 'HTMLCollection' nor type 'FormElements' is assignable to the other

這裏是我的工作代碼：

interface FormElements { 
    day: HTMLInputElement; 
    month: HTMLInputElement; 
    year: HTMLInputElement; 
} 

class BirthdateInput { 
    constructor(form: HTMLFormElement) { 
     var elements: FormElements = <FormElements> form.elements; // error here 

     this.day = elements.day; 
     this.month = elements.month; 
     this.year = elements.year; 
    } 
} 

任何想法就如何更好地施展我的form.elements對象所以打字稿不會抱怨？

Answer 1

最好的辦法是把它寫這樣的：

// Note 'extends' clause here 
interface FormElements extends HTMLFormElement { 
    day: HTMLInputElement; 
    month: HTMLInputElement; 
    year: HTMLInputElement; 
} 

class BirthdateInput { 
    constructor(form: HTMLFormElement) { 
     var elements: FormElements = <FormElements> form.elements; // OK 
     // ... 

Answer 2

原來添加extends條款修正它：

interface FormElements extends HTMLCollection { 
    day: HTMLInputElement; 
    month: HTMLInputElement; 
    year: HTMLInputElement; 
} 

Answer 3

無論是對還是錯，我發現，你也可以做像這樣：

interface FormElements { 
    day: HTMLInputElement; 
    month: HTMLInputElement; 
    year: HTMLInputElement; 
} 

class BirthdateInput { 
    constructor(form: HTMLFormElement) { 
     var elements: FormElements = <FormElements>(<any> form.elements); 

     this.day = elements.day; 
     this.month = elements.month; 
     this.year = elements.year; 
    } 
}