Tipado Básico con TypeScript: Guía Completa y Ejemplos prácticos

¿Por Qué Es Importante el Tipar?

JavaScript es un lenguaje de programación muy popular, pero tiene una gran desventaja: no permite declarar el tipo de una variable de forma nativa (cosa que soluciona el tipado con TypeScript). Esto puede llevar a errores inesperados en el código. Por ejemplo, consideremos la siguiente función:

function suma(n1, n2) {
    return n1 + n2;
}
Lenguaje del código: JavaScript (javascript)

A primera vista, parece obvio que los parámetros esperados son dos números. Sin embargo, si alguien no está familiarizado con nuestro proyecto, podría no entender qué tipo de suma realiza nuestra función. Podría ser una suma especial relacionada con el modelo de negocio.

Problemas Comunes Sin Tipado

¿Qué sucede si pasamos un parámetro que no sea un número? Aunque no es catastrófico, obtendremos un resultado no esperado.

Por ejemplo, si sumamos 1 + "2", el resultado será "12". Para evitar esto, en JavaScript debemos validar los parámetros antes de realizar la operación de suma. Si los parámetros son incorrectos, podríamos lanzar un error. Además, tendríamos que documentar el código usando jsDoc para proporcionar más información a los desarrolladores y al editor de código, reduciendo así los errores relacionados con los tipos de los parámetros.

La Solución: Tipado en TypeScript

Es aquí donde entra en juego TypeScript. TypeScript es una extensión de JavaScript que permite incluir tipos de forma nativa. Aunque no reduce significativamente el tiempo de desarrollo, ahorra muchos problemas a futuro al hacer que el código sea más seguro y reducir los errores relacionados con los tipos.

Implementación de Tipos en TypeScript

Para implementar los tipos en TypeScript, simplemente debemos hacer lo siguiente:

let a: string = 'hello';
let b: number = 10;
Lenguaje del código: JavaScript (javascript)

Como podemos ver, solo usamos dos puntos y luego escribimos el tipo de dato. Con algo tan simple como eso, ya estamos utilizando tipos. Por ejemplo, no podríamos reasignar un valor nuevo a las variables que sea de un tipo distinto al establecido al momento de inicializarlas:

a = 10; // Error: la variable 'a' es de tipo string
b = 'hello'; // Error: la variable 'b' es de tipo number
Lenguaje del código: JavaScript (javascript)

Tipos Comunes en TypeScript

Algunos de los tipos más comunes en TypeScript son:

• number
• string
• string[] (array de strings)
• number[] (array de números)
• any (se ignora el tipado de TypeScript)
• function

Validación de Parámetros con TypeScript

Podemos usar esta misma sintaxis para validar los parámetros de la función que analizamos al principio:

function suma(n1: number, n2: number): number {
    return n1 + n2;
}
Lenguaje del código: JavaScript (javascript)

Si intentamos llamar a la función con parámetros incorrectos, el editor de texto nos notificará del error antes de ejecutar el código:

suma('a', 'b'); // Error: los parámetros 'a' y 'b' deben ser de tipo número
Lenguaje del código: JavaScript (javascript)

De este modo, podríamos ahorrar validaciones y documentación, ya que el propio TypeScript se encarga de verificar los tipos.

Consideraciones Finales

Aunque TypeScript es impresionante, hay un problema relacionado con la compilación y el tiempo de ejecución, el cual se analiza más a detalle aqui. Sin embargo, los beneficios de tener un código más seguro y menos propenso a errores superan estas desventajas.