Este código funciona:
const a = document.getElementById("input1")! as HTMLInputElementSin embargo, este arroja un error:
const a: HTMLInputElement = document.getElementById("input1")!El error dice:
Type 'HTMLElement' is missing the following properties from type 'HTMLInputElement': accept, align, alt, autocomplete, and 52 more¿Alguien puede explicar por qué, por favor? ¿Significa esto que con la anotación de tipo aquí, tengo que especificar manualmente todas esas propiedades? Y si es así, ¿cómo lo haría?
Cuando realiza una consulta dom como document.getElementById("input1") , el tipo que obtiene es HTMLElement | null Con la ayuda de ! , le está diciendo a TypeScript que ignore la posibilidad de que sea null . Ahora la diferencia entre tus intentos es que:
const a = document.getElementById("input1")! as HTMLInputElement significa almacenar en a HTMLElement como HTMLInputElement . Con la inferencia de tipo de TypeScript, a sería de tipo HTMLInputElement .
const a: HTMLInputElement = document.getElementById("input1")! significa que está almacenando en una variable HTMLInputElement , un valor HTMLElement . Por eso te está gritando.