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.
este es otra alternativa que uso de vez en cuando, ya que el objecto es dinamico.
normalmente lo uso mucho en react cuando declaramos un estado inicial
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
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!).
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
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)