如何让Element子类Slider的node属性为HTMLInputElement类型？

问题场景 #

现有基类Element定义如下：

export class Element {
  public id: string;
  public name: string;
  public node: HTMLElement; // 所有元素类均继承自此

  constructor(id: string, name: string) {
    this.id = id;
    this.name = name;
  }
}

当创建继承自Element的Slider类时，尝试将node赋值为input元素并设置type属性，出现错误Property 'type' does not exist on type 'HTMLElement'：

export class Slider extends Element {
  public min: number;
  public max: number;
  public value: number;
  public step: number;

  constructor(id: string, name: string, min: number, max: number, value: number, step: number) {
    super(id, name);
    this.min = min;
    this.max = max;
    this.value = value;
    this.step = step;
    this.node = document.createElement("input"); // 此处实际是HTMLInputElement，但父类类型为HTMLElement
    this.node.id = id;
    this.node.type = "range"; // 报错：HTMLElement上不存在type属性
  }
}

解决方案 #

方法一：在子类中重新声明node属性并指定具体类型 #

在Slider类中重新定义node属性，将其类型指定为HTMLInputElement——TypeScript允许子类将父类的属性类型缩小为更具体的子类型：

export class Slider extends Element {
  public min: number;
  public max: number;
  public value: number;
  public step: number;
  public node: HTMLInputElement; // 重新声明为具体类型

  constructor(id: string, name: string, min: number, max: number, value: number, step: number) {
    super(id, name);
    this.min = min;
    this.max = max;
    this.value = value;
    this.step = step;
    this.node = document.createElement("input");
    this.node.id = id;
    this.node.type = "range"; // 不再报错
    // 可直接设置slider专属属性
    this.node.min = min.toString();
    this.node.max = max.toString();
    this.node.value = value.toString();
    this.node.step = step.toString();
  }
}

方法二：使用类型断言临时转换类型 #

如果不想重新声明属性，也可以在赋值或访问时用类型断言将HTMLElement转为HTMLInputElement：

// 赋值时一次性断言
this.node = document.createElement("input") as HTMLInputElement;
// 或者单独访问属性时断言
(this.node as HTMLInputElement).type = "range";

这种方式灵活性较低，每次访问input专属属性都需要额外处理，不如方法一简洁。

补充说明 #

document.createElement("input")确实会返回HTMLInputElement类型，但父类Element中node的类型被定义为更宽泛的HTMLElement，TypeScript会严格按照父类的类型检查规则执行，因此需要显式指定子类中node的具体类型来覆盖父类定义。

内容的提问来源于stack exchange，提问作者Magnus Enebakk