Sintaxis básica de Typescript

¿Estás interesado en Typescript? y ¿quieres empezar poco a poco? Estás en el lugar correcto. Así que aprovechemos esta entrada breve para aprender la sintaxis básica de la declaración de tipos en Typescript.

Declarando el tipo de una variable

Esta es la sintaxis más simple, y se usa para definir una variable : los dos puntitos nos permiten decirle al "type checker" de TS que tipo de dato contendrá cierta variable.

1let name:string;
2

Regularmente cuando definimos sólo una o un par de variables, ni siquiera es necesario definirlas gracias a la Inferencia de Typescript.

Te recomiendo que leas mi post sobre Inferencia, donde te explico en que consiste ;)

Alias de tipos

La mayoría de las uniones de tipo que encontrarás generalmente en programas Typescript (sobre todo cuando se usa en React) son alias que agrupan uniones más complejas, facilitando con un alias el uso a lo largo del programa.

1let names: string | string[] | undefined;
2let surNames: string | string[] | undefined;
3let rawNames: string | string[] | undefined;
4

Estas tres variables usan las mismas uniones de tipos, lo que a nosotros como programadores nos enciende el sentido arácnido y nos dice que podríamos agrupar en un alias de Typescript:

type NamesData = string | string[] | undefined La definición de un alias comienza con la palabra type seguido del nombre asignado por convención en PascalCase comenzando con mayúscula y asignando el grupo de uniones con el símbolo = como si de una variable se tratase.

Así tendríamos:

1let names: NamesData;
2let surNames: NamesData;
3let rawNames: NamesData;
4

Esta modificación seguramente te da paz mental a ti también.

Es importante decir que los alias de tipo, no son JavaScript y que no son compilados cuando Typescript genera el código resultante, estos alias existen únicamente en el sistema de Typescript.

Combinando alias de tipos

Algunos alias de tipo let isActive:boolean pueden ser insuficientes para una variable que va a mutar entre tipos, es decir que es muy probable que su valor varíe (por razones que a veces el programa no controla, como la respuesta inesperada de un API) entre diferentes tipos de datos, en estos casos es muy útil combinar los alias, resultando en una combinación. Por ejemplo:

let SomeType = number | boolean teniendo este alias podemos reusarlo para no repetir de la siguiente forma: let ActiveType = SomeType | undefined | null esto es equivalente a: number | boolean | undefined | null En resumen, podemos referenciar alias de tipos ayudándonos a no repetirnos.

El orden en que los colocamos no afecta en nada su uso, ni conlleva una anotación semántica, es decir. No importa el orden en el que declares las combinaciones.

Por último, los alias de tipos pueden ser usados a través de diferentes archivos si estás trabajando con ESModules con tan solo agregar el "keyword" export antes del "keyword" type: export type ActiveType =... lo que lo hace automáticamente importable en otros archivos.

En resumen

1. Podemos asignar un tipo a una variable por medio de la sintaxis :
2. Podemos crear uniones de tipos combinando dos o más con el operador |
3. El definir un tipo a nuestras variables es importante cuando no es obvio, ya que delimita las posibilidades para la misma.
4. Esta definición es más importante aún en variables de tipo let vs las de tipo const que probablemente sean inferidas.
5. Podemos crear alias de tipo que nos permiten agrupar uniones complejas o extensas al mismo tiempo que reutilizar estos alias a lo largo del programa, e incluso entre archivos porque podemos exportar estos tipos gracias a los ESModules.

Listo, eso es suficiente para empezar, comienza declarando los tipos de tus variables y nos vemos en el siguiente post para aprender sobre los tipos de un objeto.

Si este artículo te resultó útil y quieres que siga escribiendo sobre Typescript, por favor, no dejes de mencionármelo en Twitter

Abrazo. Bliss.