Tengo un código JS simple del lado del navegador, y pensé en intentar usar @ ts-check para detectar cualquier pelusa. Se encontraron algunos errores válidos y también agregué información del tipo de parámetro js-doc. No quiero un paso de transpilación, por lo que debe ser Javascript estándar.
Cuando accedo a las propiedades de los elementos DOM obtengo errores, porque TS no conoce el tipo real de estos elementos.
s.YWindows = document.getElementById("rows-input").valueAsNumberda...
Property 'valueAsNumber' does not exist on type 'HTMLElement'Pensé que podría usar una sugerencia de tipo JSDoc para resolver eso, pero solo soluciona el problema.
/** @type {HTMLInputElement} */ let r = document.getElementById("rows-input") s.YWindows = r.valueAsNumber Type 'HTMLElement' is missing the following properties from type 'HTMLInputElement': accept, align, alt, autocomplete, and 52 more.¿Sugerencias, o simplemente tengo que deshabilitar esta sección de alguna manera?
El compilador de TypeScript admite la conversión de tipos en línea cuando se usa la sintaxis JSDoc. Desde el enlace:
TypeScript toma prestada la sintaxis de conversión de Google Closure. Esto le permite convertir tipos a otros tipos agregando una etiqueta
@typeantes de cualquier expresión entre paréntesis./** * @type {number | string} */ var numberOrString = Math.random() < 0.5 ? "hello" : 100; var typeAssertedNumber = /** @type {number} */ (numberOrString);Incluso puedes lanzar a
constcomo TypeScript:let one = /** @type {const} */(1);
Aquí hay un ejemplo que aborda los detalles en su pregunta:
/** @type {{ YWindows?: number }} */ const s = {}; // It's not safe to assume that the ID exists in the document, // so null must be included in the union: const input = /** @type {HTMLInputElement | null} */(document.getElementById("rows-input")); if (input) { s.YWindows; // number | undefined s.YWindows = input.valueAsNumber; s.YWindows; // number } s.YWindows; // number | undefinedNo es (actualmente) posible que TypeScript entienda esta situación. La sugerencia @types se aplica a la variable que se declara, pero no cambie el tipo de retorno de la función que inicializa su valor.
Puede usar //@ts-ignore justo encima de una línea para que TS ignore todos los errores que pueden ocurrir en esta línea. Por ejemplo :
/** @type {{HTMLInputElement}} */ //@ts-ignore let r = document.getElementById("rows-input"); s.YWindows = r.valueAsNumber; Esto aún le diría a TS que r tiene un tipo HTMLInputElement , pero ignorará la discrepancia entre el tipo de r y el tipo de retorno de getElementById . Un inconveniente de esto es que puede terminar usando //@ts-ignore bastante frecuencia.