Typescript: pegá un salto en la calidad de tu código

Por qué deberías aventurarte a codear en este lenguaje y cómo dar tus primeros pasos.

Me topé con TypeScript en uno de los proyectos en los que trabajé en Flux IT. Específicamente en un desarrollo para la industria de turismo, planteado con el MERN Stack: Mongo DB, Express, React y Node. Hasta ese momento, sólo había leído comentarios e historias en las que se solucionaron problemas gracias a esta tecnología.

TypeScript hizo su entrada en escena porque el proyecto tenía un gran crecimiento en comparación al tiempo que llevaba de vida; y esto había generado muchos errores en el código, así como fallas de funcionamiento. Entonces, con este panorama, se buscó implementarlo para crear una app más sólida y estable.

¿Type…qué?

TypeScript es un lenguaje tipado que compila a JavaScript Vanilla, desarrollado y mantenido por Microsoft, y se puede usar tanto en el front end como en el back end.

Su uso correcto permite que el compilador, e incluso el editor, entienda de qué tipo debe ser cada valor, lo que nos ayuda a detectar errores al momento de compilar, y evitar problemas en tiempo de ejecución y mantenimiento del código.

La transición de JavaScript a TypeScript es sencilla y no tiene situaciones muy complejas. Pero sí se deben tener en cuenta varios detalles que antes se ignoraban al desarrollar: datos o estructuras en JavaScript Vanilla que ahora con TypeScript son necesarios, y son precisamente los cambios que mejoran y previenen errores a futuro.

Si al igual que yo hasta hace algún tiempo sólo escuchaste hablar de este lenguaje y nunca incursionaste en él, te aliento a que lo pruebes, por lo amigable que es y por todo lo que suma a las buenas prácticas de código. En mi caso, de haberlo sabido antes, me hubiera ahorrado muchas horas de sufrimiento tratando de resolver problemas con JavaScript.

A continuación, te dejo una guía paso a paso, y basada en mi experiencia, para que te inicies en el mundo de TypeScript!

Quick Set Up

Hay dos pasos previos para desarrollar en TypeScript. Primero debemos instalar Node JS desde el sitio oficial; y luego necesitamos correr el siguiente comando en la terminal:

npm install -g typescript

Para corroborar que está instalado correctamente se puede correr el siguiente comando en la terminal, y deberíamos ver la versión como respuesta:

tsc -v

Ahora que tenemos instalado TypeScript globalmente, podemos usar el TSC (Command-line TypeScript Compiler) que nos permite compilar cualquier archivo de TypeScript a JavaScript Vanilla.

Creamos un archivo llamado main.ts que es donde vamos a hacer nuestras pruebas de código TypeScript.

Para usar este comando, simplemente debemos escribir tsc seguido del nombre del archivo con la extensión .ts en nuestra terminal.

Como nuestro archivo es main.ts entonces la línea de comando sería la siguiente:

tsc main.ts

De esta manera compilamos nuestro código TypeScript y deberíamos ver que se crea un nuevo archivo con el mismo nombre pero con extensión .js .

Siguiendo el ejemplo de arriba, el nuevo archivo se llama main.js y encontramos en su interior nuestro código TypeScript compilado a JavaScript Vanilla.

Tipos de datos

Variables

En TypeScript las variables se declaran con el tipo de dato que van a recibir al ser inicializadas.

let myAge: number = 22;
let color: string = 'blue';
let isDone: boolean = true;
let anyValue: any = "32"

Enum

Es una estructura de valores válidos que ayuda definir con precisión una colección de tipos de datos. Por ejemplo una lista de constantes.

enum daysOfTheWeek {
    monday = 'Monday',
    tuesday = 'Tuesday'
    wednesday = 'Wednesday',
    thursday = 'Thursday',
    friday = 'Friday'
}

Array

Al igual que con las variables, los arraydeben declararse con el tipo de dato que van a almacenar seguido de [] .

let numbers:number[] = [1,2,3,4,5];
let colors:Array<String> = ['blue','red','yellow'];

Funciones

En el caso de las funciones los parámetros, deben indicar qué tipo de valor van a recibir y retornar al finalizar la ejecución de la función.

function buildMessage(nombre: string): string{ 
    return 'Hi ' + nombre;
}

si la función no tiene ningún tipo de retorno se debe declarar como :void .

function sayHello(nombre: string): void{ 
   console.log('Hi ' + nombre);
}

Objetos

Los objetos en TypeScript se crean de la misma manera que en JavaScript, con la diferencia de que debe declararse un objeto con los tipos de datos que va tener cada propiedad.

let person:{name:string, hobby:string, saludar():void}= {
    name: 'cris',
    hobby: 'programming'
    saludar() { console.log('Hi ' + this.name); }
}

Type

En TypeScript los type definen la estructura de los tipos de datos y métodos que se deben recibir. Si alguna de las propiedades no se cumple, simplemente el código no podrá ser compilado.

Un plus: se pueden reutilizar varias veces, para no tener que repetir los tipos de datos.

type Person = {
   name: string,
   hobby: string,
   saludar() => void
}
let person1:Person= {
    name: 'Jhon',
    hobby: 'programming'
    saludar() { console.log('Hi ' + this.name); }
}
let person2:Person= {
    name: 'Tony',
    hobby: 'programming'
    saludar() { console.log('Hi ' + this.name); }
}

Interface

Las interfaces se definen de la misma manera que los type, con la diferencia de que se usa la palabra reservada interface. Su objetivo y su uso es similar: define la estructura y los métodos a implementar. De la misma manera en que ocurre con los type, si alguno de estos valores no se cumple el código no se podrá compilar.

La principal diferencia entre type e interface es que esta última está pensada para trabajar con clases.

interface Person {
   name:string,
   hobby:string,
}
let person1:Person= {
   name: Cristhian,
   hobby: programming
}
function buildMessage(person: Person): string{ 
    return 'Hi ' + person.name;
}

¿Types o Interfaces?

El uso que se le da a type e interface es muy similar. Muchas cosas de las que se pueden realizar con interface son posibles para type. Pero hay que tener en cuenta que una vez que se define un type no se le pueden agregar más propiedades; mientras que interface permite extender sus propiedades según se lo necesite.

Veamos ahora las diferencias al tratar de extender un type o una interface usando los siguientes ejemplos:

interface dog{
    nombre: string;
}

type cat = {
    nombre: string;
}

Para extender una interface debemos usar la palabra reservada extends seguida del nombre de la interface que queremos que herede su estructura.

interface Auto extends Transporte {
    ruedas: number;
}

Como dijimos antes, los type no permiten extensiones. Por lo tanto debemos crear un nuevo type de la siguiente manera:

type newCat = cat & {
    color: string;
}

¡Tu turno!

Aprender a codear con TypeScript fue todo un desafío, pero tenía muy claro que era el siguiente paso en mi crecimiento como Web Developer. Como todo aprendizaje me llevó varias veces a chocar contra la pared y pensar cuál era el problema que tenía enfrente mío.

Finalmente logré entender y perder el miedo, prestando más atención a los mensajes de error de TypeScript, que siempre ofrece (de manera sutil) la solución.

Si estás por empezar a aventurarte con este lenguaje, mi recomendación es que tengas paciencia hasta lograr absorber bien toda la teoría y los casos de uso, porque ahí es cuando vas a disfrutarlo mucho más.

Desde la teoría hasta la práctica, TypeScript ofrece una mejora enorme con respecto al código limpio y calidad de código (es una pena que no venga incluido al navegador de manera nativa y tengamos que agregarlo nosotros al proyecto).

Aprenderlo no solo te abre la mente a una mejor calidad de código: también te permite aumentar tus conocimientos y oportunidades, ya que los mejores proyectos (los más robustos y con años de desarrollo), están en TypeScript.

¿Ahora te animás a codear en TypeScript? Te dejo mi contacto por si necesitás una mano: cristhian.pabon@fluxitsoft.com.

Conocé más sobre Flux IT: Website · Instagram · LinkedIn · Twitter · Dribbble · Breezy