Por que aprender TypeScript - Tutorial en español

¿Que es TypeScript? 🤔

Es un lenguaje altamente tipado que compila directamente a Javascript, agregando tipado seguro y todos los beneficios del tipado a la hora de desarrollar, en resumen "Un Javascript con superpoderes para desarrolladores". Como compila directamente a Javascript tiene el mismo rendimiento y compatibilidad completa con el ecosistema de Javascript.

Si a la final es Javascript ¿Por que usarlo? 🤨

Principalmente por el tipado, que al momento de desarrollo evita errores de tipado y crea un código más escalable, mantenible y legible, ademas de agregados como decoradores y mejoras en programación orientada a objetos.

TypeScript es altamente popular, y año con año es más usado y popular, y la gran mayoría lo utiliza felizmente. Las grandes compañías lo utilizan sobre Javascript por ser altamente escalable y es compatible con todos los grandes Frameworks de Javascript (Incluso Google con Angular usa por defecto TS).

Por último es muy fácil de aprender si ya manejas Javascript, TypeScript te sera extremadamente familiar y fácil de aprender, por que no deja de ser "Javascript con algunos pasos extras".

Bien, me convenciste ¿Por donde empiezo? 🤓

TypeScript es un lenguaje que compila a Javascript, por lo que necesitamos el compilador:

npm install -g typescript

Esto instalara globalmente typeScript en nuestra PC, para estar seguros que se instalo ejecutamos en consola:

tsc --version

¿Y ahora como uso el compilador? 🤨

Pues para probarlo necesitas crear código de TypeScript y probarlo, los archivos typeScript tiene la extensión .ts, en una carpeta creamos un archivo hello.ts agregamos esto:

console.log("hello world");

Para compilarlo ejecutamos en consola:

tsc hello.ts

eso generara un archivo hello.js que podemos ejecutar como un archivo de Javascript normal

> node hello.js
hello world

ejecutar este comando puede ser algo incomodo, el compilador tiene una opción de "hot reload", cada vez que hagas un cambio lo compilara a Javascript automaticamente ejecutando:

tsc hello.ts --watch

¿Y donde esta el tipado de TypeScript? 🙃

Ahora que estamos familiarizado con el compilador, vamos a ver las características de TypeScript, empezando con el tipado declarando algunas variables:

//Inferido
let name = "José"

//Directo
let age:number = 23

//Declaración vacia, por defecto al no asignar un valor
//la variable es undefined 
let phone:number

//Tipo any, como su nombre indica es cualquier tipo de valor
const haveCar:any = false

Estas son las principales formas de declarar variables en TypeScript, el tipo que se le asigne no podra ser cambiado y siempre sera el mismo, por ejemplo no queremos que un nombre sea un booleano o un numero, tiene que ser un texto.

En las funciones podemos especificar el tipo de entrada y salida, asegurándonos tener el tipo de dato necesario de entrada y no equivocarnos a devolver información:

//Directo
const GetMagicNumber = (n:number):number => {
    return n * 2;
}

//Retorno inferido
//Infiere que tipo de valor va a regresar la función
//por el dato que tenga el return
const GetAmazingNumber = (n:number) => {
    return n * 4;
}

//Any
//Aceptara cualquier tipo de valor
const GetAnyStuff = (n:any) => {
    return n + 2;
}

Esto es genial pero ¿Si quiero usar un Objeto con varios parámetros?

TypeScript te permite crear tipos e interfaces personalizadas para crear diferentes tipos de objetos:

//Tipo porsonalizado
//Es bastante parecido a un objeto
//asignas el nombre a la izquierda
//y el tipo a la derecha.
//Puede ser cualquier tipo dato
//Inclusive personalizado
type dog = {
    name: string;
    age: number;
    kind: string;
}

//Las interfaces son más usadas en Typescript
//son casi iguales a los tipos
interface cat {
    name: string;
    age: number;
    kind: string;
}

//Al declarar un nuevo objeto se debe
//cumplir con el tipo de datos
const firulai:dog = {
    name: "firulai",
    age: 5,
    kind: "good one"
}

//El mismo comportamiento que el tipo
const garfield:cat = {
    name: "firulai",
    age: 5,
    kind: "god one"
}

Y este tipo personalizado puede ser pasado como cualquier otro como parametro de funcione:

const GetCatName = (cat:cat):string => {
    return cat.name;
}

Esto permite crear objetos fuertemente tipados, con parámetros necesarios para funcionar, dando una mejor experiencia de desarrollo teniendo objetos que sabemos que parámetros recibiremos y evitamos cometer errores de tipado en el código.

Esta verificación solo se hace durante el desarrollo, al momento de compilar a JavaScript no surtirá efecto.

Ademas de estos tipos personalizados, TypeScript proporciona mejoras a las clases respecto a Javascript.

class Bird{
  constructor(name, age, kind) {
    this.name= name;
    this.age= age;
    this.kind = kind;
  }
}

Esta es una clase tipica de Javascript, con 3 parametros necesarios en el constructor. Typescript tiene varias mejoras para las clases, como los campos (Fields):

class Bird{
  snack:string = "cookie";
  speak:boolean = true;
  constructor(name, age, kind) {
    this.name= name;
    this.age= age;
    this.kind = kind;
  }
}

Se le pueden aplicar tipado de manera simple como con las variables, pero algo más interesante es que por defecto son campos "públicos", que pueden ser accedidos desde el objeto una vez creado, que es algo que agrega Typescript, el nivel de acceso de sus campos.

class Bird{
  private snack:string = "cookie";
  private speak:boolean = true;

  //Tambien puedes declarar campos de esta forma
  constructor(private name:string,  private age:number, private kind:string){
    this.name= name;
    this.age= age;
    this.kind = kind;
  }
}

Al agregar private los campos solo pueden ser accedidos en esa clase, también existe protected que lo hace accesible también para subclases. Otro importante es readonly también aplicable a tipos e interfaces, que lo que hace despues de ser asignado el valor solo puede leer el valor.

Estos también pueden usarse para las funciones:

class Bird{
  private snack:string = "cookie";
  private speak:boolean = true;

  //Tambien puedes declarar campos de esta forma
  constructor(private name:string,  private age:number, private kind:string){
    this.name= name;
    this.age= age;
    this.kind = kind;
  }

  //Una funcion privada, normalmente para funciones internas
  private getSnack() {
    return this.snack;
  } 

  getBirdInfo():string {
    return `age: ${this.age}, name: ${this.name}, kind: ${this.kind}, snack: ${this.getSnack()}`
  }
}


 const myBird = new Bird("pedro", 2, "loro") 

 console.log(myBird.getBirdInfo())

Para que veas la diferencia, al compilar a JavaScript, el código se ve asi:

"use strict";
class Bird {
    constructor(name, age, kind) {
        this.name = name;
        this.age = age;
        this.kind = kind;
        this.snack = "cookie";
        this.speak = true;
        this.name = name;
        this.age = age;
        this.kind = kind;
    }
    //Una funcion privada, normalmente para funciones internas
    getSnack() {
        return this.snack;
    }
    getBirdInfo() {
        return `age: ${this.age}, name: ${this.name}, kind: ${this.kind}, snack: ${this.getSnack()}`;
    }
}
const myBird = new Bird("pedro", 2, "loro");
console.log(myBird.getBirdInfo());

El resultado de consola seria:

"age: 2, name: pedro, kind: loro, snack: cookie"

¡Felicidades! Has aprendido lo básico de TypeScript, para seguir aprendiendo recomiendo es que crees un proyecto más grande usando Typescript, aplicar TypeScript a proyectos con Node JS y React, o aprender a usar Nodemon.

Pero sobre todo, no dejes de aprender y experimentar. Nunca pares de aprender.

En un futuro Post cubriré como crear una API con Node JS y TypeScript.

😘 Gracias por leer.