Conceptos básicos

Typescript es una extensión de Javascript que añade tipos estáticos opcionales al lenguaje.

Partiendo de esta definición, es importante destacar que no viene por defecto en la instalación de cualquier runtime de JS, como NodeJS, y es necesario instalarlo por separado.

Las ventajas de usar Typescript (TS), principalmente, son que nos permite detectar errores en el código mientras desarrollamos o transformamos de TS a JS (compilación con TSC), volviendo más eficiente el proceso de desarrollo y haciendo más robusto el código que programemos.

Cuando programamos en TS podemos usar código JS. Como mencioné anteriormente, todo código de TS necesita ser convertido a JS para que pueda ser ejecutado. La herramienta que se encarga de llevar a cabo este proceso es el compilador de tyepscript (TSC).

Principales características

• Uso de interfaces y tipos de datos,
• Desarrollo orientado a objetos (OOP): TypeScript mejora el soporte para la programación orientada a objetos en JavaScript, con características como clases, herencia, y modificadores de acceso.

Instalación

Para instalar Typescript se recomienda hacerlo dentro del entorno de NodeJS y utilizar cualquier gestor de paquetes compatible, tales como NPM o YARN.

Una vez cumpliendo los requerimientos previos, podemos ejecutar los siguientes comandos para inicializar un nuevo proyecto

yarn init
// Nos pedirá la siguiente información
// yarn init v1.22.10
// question name (typescript): TypeScriptTest
// question version (1.0.0):
// question description: Post
// question entry point (index.js):
// question repository url:
// question author: Diego
// question license (MIT):
// question private:
// success Saved package.json
// ✨  Done in 106.84s.

yarn add typescript

Inicializar la configuración de Typescript

npx tsc --init --rootdir src --outdir dist

Ahora podemos crear un nuevo archivo llamado index.ts dentro de la carpeta src y ejecutemos en la terminal el siguiente comando para que esté compilando el código mientras programamos:

npx tsc --watch

Usando el editor de tu preferencia (se recomienda VSCode) podemos empezar a escribir código TS

let message: string = "testing my first TS code";
console.log(message);

"use strict";
let message = "testing my first TS code";
console.log(message);

Declarando variables

En TypeScript, las variables se pueden declarar de varias formas, utilizando let, const o var, junto con anotaciones de tipo opcionales.

1. Declaración básica sin tipo explícito

TypeScript puede inferir el tipo automáticamente:

let mensaje = "Hola mundo"; // TypeScript infiere que es string
let edad = 25; // TypeScript infiere que es number

2. Declaración con anotaciones de tipo

Podemos especificar el tipo explícitamente:

let nombre: string = "Juan";
let activo: boolean = true;
let precio: number = 19.99;

3. Tipos de datos en TypeScript

Tipos primitivos

let texto: string = "Hola";
let entero: number = 42;
let decimal: number = 3.14;
let esValido: boolean = false;

Arreglos

let numeros: number[] = [1, 2, 3, 4];
let palabras: string[] = ["uno", "dos", "tres"];

// O Array<T>

let valores: Array<number> = [10, 20, 30];

Tuplas (arrays con tipos fijos)

let tupla: [string, number] = ["Edad", 30];

Uso de any (permite cualquier tipo, pero se recomienda evitarlo)

let variable: any = 5;
variable = "Ahora soy un string"; // No hay error

Uso de unknown

let desconocido: unknown = "Hola";
desconocido = 42; // No hay error, pero no se puede usar sin verificación de tipo
// Para usarlo, hay que hacer una comprobación de tipo:
if (typeof desconocido === "string") {
  console.log(desconocido.toUpperCase());
}

Tipos avanzados

• Unión de tipos |

let identificador: string | number;
identificador = "ABC123";
identificador = 123; // Ambas asignaciones son válidas

• Literales (valores fijos)

let estado: "activo" | "inactivo";
estado = "activo"; // ✅ Válido
estado = "inactivo"; // ✅ Válido
estado = "pendiente"; // ❌ Error

• Objetos con tipos

let usuario: { nombre: string, edad: number } = {
  nombre: "Carlos",
  edad: 25,
};

Funciones

En la siguiente funcion se especifica la funcion sumar, toma dos argumentos del tipo number y, despues de los dos puntos se especifica el tipo de dato que regresará,

function sumar(x: number, y: number): number {}

Clases

class Animal {
  private name: string;

  constructor(name) {
    this.name = name;
  }

  move(distanceInMeters: number): void {
    console.log(`${this.name} moved ${distanceinMeters}`);
  }
}