DEV Community

masia
masia

Posted on • Updated on

Inferir Tipado de Objetos

No le han pasado que han declarado un objecto y luego ir agregando mas campo con el pasar del tiempo (ya sea por nuevo requerimientos, no era necesarios al comienzo o no sabian que iban a ser necesarios) y asi mismo ir actualizando tambien el tipado o dejar que Ts infiera, pero si necesitan la key del objecto? o el value?.

En mi dia a dia uso Ts y bastante objecto una de las ventajas que me gusta es el autocompletado/sugerencias en el editor de codigo que te da el tipado, si no te sale una opcion de elegir o no esperabas en el autocompletado/sugerencias sabes que no existe en ese objecto (al menos que la lib q usas por alguna razón no la incluyo en su propio tipado).

Una de las tecnicas que uso de Ts es typeof, keyof, combinacion de ambas aveces, veremos unos ejemplos de como se usa cada uno.

typeof, keyof

En el caso de los objectos una de las formas mas basica que hacemos es crear el tipado y luego tiparlo a la variable que vamos a crear.
create Types and var

este es otra alternativa que uso de vez en cuando, ya que el objecto es dinamico.

use typeof

normalmente lo uso mucho en react cuando declaramos un estado inicial

initial state use case

Cool con el autocompletado verdad!! 😎.
ahora si tenemos una funcion que lo que hace es devolvernos el valor dependiendo de la llave que la pasamos, podriamos crear la funcion asi

fn that return the obj value by key

No hay ningun problema crearlo asi, pero si queremos el autocompletado/sugerencias que nos diga que puede recibir como argumento a la hora de llamar la funcion no la tendriamos 😢 (aunque podriamos mentalmente saber que key pasar y recibir el valor, pero eso es cognitivamente estresante 🫠, para eso esta la tecnologia de nuestro lado!).

no autocomplete

para tener el autocompletado/sugerencias y evitar pasar campos que no exista (una forma de protegernos y ahorrar tiempo y ver los errores en el editor, todo eso antes del runtime!!🫠) podemos usar la combinacion de typeof y keyof

with autocomplete

Yayyyy!!! 🙌 tenemos autocompletado/sugerencias de nuevo!

Espero que esto le ayude en su dia a dia como desarrollador en Typescript y disculpa por la imagenes y calidad de redacció 👀.

aqui las documentacion:

Top comments (0)