Question

我使用Typescript 3.5.1编写以下代码

class MyParent<T extends HTMLElement> {
    eFoo: T;
}

class MyChild<T = HTMLInputElement> extends MyParent<T> {
    foo() {
        this.eFoo.value = 'bar';
    }
}

class GrandChild extends MyChild<HTMLTextAreaElement> {
    foo() {
        this.eFoo.value = 'baz';
    }
}

第二个类MyChild的编译错误我不太了解

“类型'T'不满足约束'HTMLElement'。”
“类型'T'上不存在属性'值'。”

GrandChild类看起来不错，完全没有错误。

Answer 1

class MyChild<T = HTMLInputElement> extends MyParent<T> {
    foo() {
        this.eFoo.value = 'bar';
    }
}

T = HTMLInputElement表示T的默认值为HTMLInputElement，但是T可以为任何类型：您没有constrained T的MyChild。它可以是SomeOtherClass或{}或number或never。因此，它不能适当替代T extends HTMLElement中的MyParent<T>（您的第一条错误消息），并且不能肯定包含value之类的属性（您的第二条错误消息）。

您可以像使用MyParent一样用语法described in Typescript 2.3's release notes约束它：

class MyChild<T extends HTMLInputElement = HTMLInputElement> extends MyParent<T> {
    foo() {
        this.eFoo.value = 'bar';
    }
}

现在对于所有T值，myChild.eFoo肯定有一个value。

作为示例代码的补充说明，请注意HTMLTextAreaElement不会扩展HTMLInputElement。如果要将<input>和<textarea>元素应用于MyChild，则可能需要更改类型参数和期望值。

打字稿类型“ T”不满足约束“ HTMLElement”

1 个答案: