100 días de código: aprendiendo typescript parte 2

¡Hey hey hey!

Ayer avanzamos con nuestros conocimientos sobre los tipos en typescript y terminamos aprendiendo sobre objetos pero algo importante que se me olvido comentar son

Propiedades opcionales en objetos

Para agregar este tipo de pro…


This content originally appeared on DEV Community and was authored by Daro

¡Hey hey hey!

Ayer avanzamos con nuestros conocimientos sobre los tipos en typescript y terminamos aprendiendo sobre objetos pero algo importante que se me olvido comentar son

Propiedades opcionales en objetos

Para agregar este tipo de propiedades a nuestro objeto basta con colocar un signo de interrogación(?) al final del nombre de la propiedad de la siguiente forma:

typescript optional properties in objects

Aunque al hacerlo debes tener en cuenta que si intentas acceder al valor de una propiedad que es opcional y no contiene nada esta devolverá undefined.

Tipos

Typescript nos permite combinar tipos para crear nuevos con algunos operadores.

Union type

Nos permite especificar que tipos de valores puede tener una variable con ayuda del operador |. Un ejemplo de este puede ser un ID que muestre el ID como esta:

typescript union type example

Algo a destacar con estos es que no podrás utilizar métodos específicos de un tipo de dato a menos que los dos tipos lo contengan. Volviendo al ejemplo anterior y suponiendo que necesitáramos el método toUpperCase() de los string, typescript nos devolvería un error debido a que los valores number no lo contienen.

Esta problemática puede ser solucionada con condicionales, volviendo al ejemplo anterior tendríamos:

typescript union type example 2

Alias

Los alias son, como su nombre lo indica, nombres que les ponemos a ciertas agrupaciones de datos que se pueden usar en diferentes lugares. Para comprenderlo mas rápido veamos la siguiente imagen:

typescript alias example

Al usarlos debes saber que los alias no son modificables, no se pueden agregar nuevas propiedades.

Extender un alias

Para solventar esta incapacidad de modificación puedes crear extensiones de estos mediante las intersecciones. Estas se especifican con el carácter and(&) como en el siguiente ejemplo:

typescript extends alias example

De esta manera typescript nos permite crear tipos con otros.

Interfaces

Una interfaz es otra forma de nombrar una agrupación de tipos. La diferencia principal es que los alias no te permiten agregar nuevas propiedades mientras que las interfaces si. Utilizando el ejemplo anterior podemos ver como se declara una interfaz:

typescript interface example

Extensión de una interfaz

Para crear una interfaz a partir de otra podemos usar la palabra clave extends. Ejemplo:

typescript extends interface example

Y con ello, de manera similar a con los alias, podremos lograr crear interfaces nuevas a partir de otras.

Agregar nuevos campos a una interfaz

Para agregar nuevos campos a una interfaz, lo cual es la principal diferencia de los alias, solo se necesita declarar de nuevo la interfaz con los nuevos valores. Veamos un ejemplo:

typescript example interface add properties

Ahora que conoces algunos tipos de datos en typescript te reto a crear algún proyecto con typescript para practicar y que no pasen desapercibidos esos conocimientos.

Ahora sigamos con la sección diaria del reto:

Hoy

  • He avanzado con mi aprendizaje de typescript con ayuda de la documentación de typescript.
  • He practicado typescript
  • He logrado mejorar mi manejo del tiempo.

Estoy muy emocionado por comenzar un proyecto con typescript para probar los nuevos conocimientos que estoy adquiriendo. También debo aprender redux asi que intentare dedicarle algo de tiempo al día.

Espero que tengas mucho éxito con tus proyectos y animo!

¡Hasta la vista!

Foto del cover de Jexo en Unsplash.


This content originally appeared on DEV Community and was authored by Daro


Print Share Comment Cite Upload Translate Updates
APA

Daro | Sciencx (2022-02-04T00:46:48+00:00) 100 días de código: aprendiendo typescript parte 2. Retrieved from https://www.scien.cx/2022/02/04/100-dias-de-codigo-aprendiendo-typescript-parte-2/

MLA
" » 100 días de código: aprendiendo typescript parte 2." Daro | Sciencx - Friday February 4, 2022, https://www.scien.cx/2022/02/04/100-dias-de-codigo-aprendiendo-typescript-parte-2/
HARVARD
Daro | Sciencx Friday February 4, 2022 » 100 días de código: aprendiendo typescript parte 2., viewed ,<https://www.scien.cx/2022/02/04/100-dias-de-codigo-aprendiendo-typescript-parte-2/>
VANCOUVER
Daro | Sciencx - » 100 días de código: aprendiendo typescript parte 2. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/02/04/100-dias-de-codigo-aprendiendo-typescript-parte-2/
CHICAGO
" » 100 días de código: aprendiendo typescript parte 2." Daro | Sciencx - Accessed . https://www.scien.cx/2022/02/04/100-dias-de-codigo-aprendiendo-typescript-parte-2/
IEEE
" » 100 días de código: aprendiendo typescript parte 2." Daro | Sciencx [Online]. Available: https://www.scien.cx/2022/02/04/100-dias-de-codigo-aprendiendo-typescript-parte-2/. [Accessed: ]
rf:citation
» 100 días de código: aprendiendo typescript parte 2 | Daro | Sciencx | https://www.scien.cx/2022/02/04/100-dias-de-codigo-aprendiendo-typescript-parte-2/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.