TypeScript中HTMLElement类型断言可用但类型注解报错原因

核心是TypeScript对类型断言和类型注解的校验规则完全不同：
首先document.getElementById的默认返回类型是HTMLElement | null，加非空断言!后会过滤掉null类型，得到通用DOM元素类型HTMLElement——这是所有DOM元素的公共父类型，而HTMLInputElement是继承自它的子类型，包含input元素独有的accept、value、checked等几十种专属属性，父类型本身不包含这些属性定义。

两种写法的校验逻辑差异：

• 第一段可运行代码用的是as类型断言：本质是开发者主动给TS做担保，告诉编译器“我百分百确定这个值就是HTMLInputElement类型，你不用做严格校验，直接按这个类型算”。只要两个类型存在继承包含关系，TS就会直接信任这个声明，不会检查属性是否齐全，相当于手动绕开了赋值环节的严格类型校验。
• 第二段报错代码用的是显式类型注解：这种写法会强制TS对赋值符号右侧的表达式做严格的子类型兼容性检查，要求右侧的值必须满足注解类型的所有属性约束。但右侧表达式推导出来的类型是HTMLElement，作为父类它天然缺少HTMLInputElement定义的专属属性，就会抛出你看到的“缺少accept、align等50多个属性”的报错。

用类型注解就必须手动补全所有缺失属性吗？ #

完全不需要，99%的业务场景下也绝对不要这么做。
你通过DOM API拿到的是浏览器已经实例化好的真实DOM对象，如果这个元素本身就是input，报错里提到的那些属性本来就已经存在于对象上，只是TS静态分析的时候没法通过通用的getElementById方法判断出它的具体元素类型而已。给真实存在的DOM对象手动补属性是完全多余、违背开发常识的操作。
只有极端场景需要补全属性：比如你要从零手写一个符合HTMLInputElement类型约束的普通JS对象（比如单元测试的mock数据），这时候才需要按类型定义把所有必填属性补全，日常DOM开发几乎碰不到这种情况。

正确操作方式 #

根据你对代码确定性的要求选对应写法即可：

1. 如果你完全确定这个id对应的元素一定存在、且一定是input元素，直接用类型断言即可，这也是TS操作DOM的常规写法：

// 写法1：靠断言自动推导类型，就是你第一段可运行的写法
const a = document.getElementById("input1")! as HTMLInputElement

// 写法2：如果要保留显式类型注解，给右侧表达式也加上断言就能通过校验
const a: HTMLInputElement = document.getElementById("input1")! as HTMLInputElement

2. 如果你没法100%确定元素是否存在、是否为input类型，加一层运行时判断即可，TS会自动完成类型收窄，不需要任何断言或者手动补属性：

const el = document.getElementById("input1")
if (el instanceof HTMLInputElement) {
    // 这个代码块内TS会自动把el识别为HTMLInputElement类型，所有专属属性都可以直接访问
    console.log(el.value)
}

内容的提问来源于stack exchange，提问作者sir-haver