Javascript 如何在typescript中使用表单元素

我想通过

myForm.elements

访问表单元素，然后通过名称访问每个元素，例如，

myForm.elements.month

。Typescript不喜欢此b/c它不知道

form.elements

包含

month

属性。我想，让我们创建一个界面吧！我确实这样做了，（请参见下面的代码），但我得到了这个类型脚本错误：

类型“HTMLCollection”和类型“FormElements”都不可分配给其他类型

以下是我正在使用的代码：

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

接口表单元素{
天：HTMLInputElement；
月份：HTMLInputElement；
年份：HTMLInputElement；
}
类BirthdateInput{
构造函数（形式：HTMLFormElement）{
var-elements:FormElements=form.elements；//此处出错
this.day=elements.day；
this.month=elements.month；
this.year=elements.year；
}
}

---

关于如何更好地转换我的

表单.elements

对象以便typescript不会抱怨，您有什么想法吗？

最好的方法是这样写：

// 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
        // ...

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

//注意此处的“extends”子句
接口FormElements扩展了HTMLFormElement{
天：HTMLInputElement；
月份：HTMLInputElement；
年份：HTMLInputElement；
}
类BirthdateInput{
构造函数（形式：HTMLFormElement）{
var-elements:FormElements=form.elements；//确定
// ...

添加一个

扩展

子句可以修复它：

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

---

无论是对是错，我发现你也可以这样做：

// 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
        // ...

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

接口表单元素{
天：HTMLInputElement；
月份：HTMLInputElement；
年份：HTMLInputElement；
}
类BirthdateInput{
构造函数（形式：HTMLFormElement）{
var元素：FormElements=（form.elements）；
this.day=elements.day；
this.month=elements.month；
this.year=elements.year；
}
}

FormElements

实际上对应于form.elements，而不是表单本身，因此最好从

HTMLCollection

扩展，或者可能从

HTMLFormElement

扩展，而不是

HTMLFormElement

。但是

扩展方面是正确的。