Typescript para desarrolladores de Angular
Tags: angular, typescript, beginners, frontend
Published: 2023-02-01 06:33:38

[English version](https://dev.to/miasalazar/typescript-for-angular-developers-14ki)

Hace ya dos años que empecé a trabajar con Angular y, no voy a mentir, al principio Typescript se me hizo rarísimo. Nunca había tocado ninguna de las dos tecnologías antes, así que los archivos .ts se me hicieron un poco cuesta arriba, con lo diferente que se me hacía este framework desarrollado por Google. Por este motivo, aquí voy a dejar una serie de pinceladas para aquellos que se inician en typescript.

**¿Qué es?**
Typescript es un superset de Javascript, es decir, puede ejecutar código tanto de Javascript como el suyo propio. Sin embargo, la mayoría de los navegadores no entienden este lenguaje, así que necesita ser transpilado a Javascript para que este pueda ser entendido.

Fue desarrollado en 2012 ya que Javascript presentaba algunos problemas para crear aplicaciones a gran escala: no tiene tipado, no tenía clases ni módulos… Por este motivo, fue creado por Microsoft, creando un lenguaje que, hoy en día, se mantiene a la vanguardia.

**Variables tipadas**
Su principal características es que es tipado. Podemos especificar el tipo de la variable despues de su nombre. Este tipado incluye los tipos primitivos, como los boolean, los arrays, los objetos…
![Ejemplos de tipado](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/16girkh7m78e5gt1izqf.PNG)

Dentro de los tipados, Typescript ofrece algunas opciones muy interesantes como:

- Tipos literales: Puedes especificarle a las variables que serán un string o number en concreto.
![Ejemplo de tipos literales](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8usal8gagteizxxs28aj.PNG)

- Tuplas: Es un array de tamaño fijo y al que le dices su tipo para cada elemento.
![Ejemplo de tuplas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ntbx28hxa11stlkgimep.PNG)

- Tipos dinámicos: El tipo any te permite que esa variable guarde un valor de cualquier tipo. [Para conocer la diferencia entre any y unknow podemos leer este artículo](https://dmitripavlutin.com/typescript-unknown-).
- Tipo genéricos: Son complejos pero de gran utilidad. Nos permite reutilizar código y, para resumir, permiten trabajar con varios tipos.  [Puedes leer más sobre los genéricos aquí](https://code.tutsplus.com/es/tutorials/typescript-fo).

**Enum**
Son una característica muy interesante de este lenguaje. Suponen una lista de valores relacionadas, que son constantes.
![Ejemplo de enumerado](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qhrvglvkn9s4moc5b4wb.PNG)

**Funciones**
Las funciones también se tipan, tanto lo que devuelven, como cada uno de sus parámetros.
![Ejemplo de función tipada](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6yuyor9jy44mc1jh7vs0.PNG)

**Interfaces y classes**
Las interfaces se parecen bastante a las de otros lenguajes. Son una estructura que define una sintaxis que debe seguirse. Las interface no son compiladas, sino que se emplean para comprobar el tipado.
![Ejemplo de interfaz](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r0rat02bispme33sha9h.PNG)

**Propiedades opcionales**
Relacionado con las interfaces, a veces deseamos indicar que algunas propiedades serán opcionales. Para hacer esto utilizamos el encadenamiento opcional, con un interrogante.
![Ejemplo de propiedad opcional](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y153omabyirup3215v3i.PNG)

**Tipos combinados**
Puedes indicar que una variable será de un tipo o de otro, y también podemos decirle que es una clase que implementa una interfaz.
![Ejemplo de tipos combinados](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x37lsffumy4s3uu4942l.PNG)

**Type Assertion**
Parecido a la conversión de tipos, o casting, de otros lenguajes.
![Ejemplo de type assertion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/56eus1ww6tr2fp5c2u3u.PNG)

**Nombramiento**
Typescript usa camelCase para variables, funciones, atributos, propiedades y métodos y PascalCase para Interfaces y Clases.