04.TypeCasting.md

Type Casting (Conversion de tipos)

← Volver a la tabla de contenido

Cuanto TypeScript no puede detectar el valor de un tipo especifico Type Casting es util para esto

suponinego que en el HTML existe una etiqueta de tipo

<input />

al seleccionarla en el script TypeScript va a inferir el tipo de la etiqueta como HTMLInputElement | null

const userInputElement = document.querySelector('input');

el null es porque para TypeScript es probable que no exista el elemento en la pagina

esto cambia si en la etiqueta del HTML se le asigna un ID

<input type='text' id='user-input' />

como desarrolladores sabemos que la etiqueta existe y que ese id lo asignamos a ella, pero TypeScript no lo sabe, por ello si cambiamos en el script:

const userInputElement = document.getElementById('user-input');

TypeScript infiere el valor como un HTMLElement | null no sabe que tipo de elemento en especifico es.

al tratar de asignar un valor typescript mostrara dos errores

1. Object is possibly 'null'
   el cual es posible solucionar agregando el carácter "!" al final

   const userInputElement = document.getElementById('user-input')!;

   esto le dice a TypeScript que el elemento que estamos seleccionando existe y no va a ser null

2. Property 'value' does not exist on type 'HTMLElement'.
   y es porque el tipo genérico HTMLElement no soporta propiedades de los elementos HTML específicos como HTMLInputElement, asi que debemos informarle a TypeScript que el elemento que estamos seleccionando no solo no es nulo sino también es del tipo HTMLInputElement y hay dos formas de hacerlo:

   const userInputElement = <HTMLInputElement>document.getElementById('user-input');
   
   userInputElement.value = 'Hi there';

   en React podría ser mas util la palabra clave as

   const userInputElement = document.getElementById('user-input') as HTMLInputElement;
   
   userInputElement.value = 'Hi there';

en caso de no saber si el elemento retornara un null se puede usar una validación truthy or falsy:

 const userInputElement = document.getElementById('user-input');

 if(userInputElement){
  (userInputElement as HTMLInputElement).value = 'Hi There';
 }

---

← Volver a la tabla de contenido