IA Cheatsheets

¡Excelente elección! TypeScript es una herramienta fundamental en el desarrollo web moderno, especialmente para proyectos a gran escala, ya que añade seguridad de tipo y mejoras en la productividad. Aquí tienes un “cheatsheet” completo y bien estructurado de TypeScript, optimizado para ser claro y conciso para una IA conversacional.

🟦 TypeScript Cheatsheet Completo 🟦

TypeScript es un superset de JavaScript que añade tipado estático opcional al lenguaje. Se compila a JavaScript plano, lo que significa que cualquier código JavaScript válido es también código TypeScript válido. Su objetivo principal es ayudar a los desarrolladores a construir aplicaciones más robustas y escalables, detectando errores de tipo en tiempo de desarrollo.

1. 🌟 Conceptos Clave

2. 🛠️ Configuración Inicial

  1. Instalación del Compilador (Global):

    npm install -g typescript
# o
yarn global add typescript

  2. Inicializar Proyecto (tsconfig.json):

    • Crea un archivo tsconfig.json en la raíz de tu proyecto. Este archivo configura cómo el compilador de TypeScript (tsc) compilará tus archivos.
    tsc --init

  3. Compilar TypeScript:

    tsc # Compila todos los archivos .ts según tsconfig.json
tsc myFile.ts # Compila un archivo específico
tsc --watch # Compila automáticamente los cambios

tsconfig.json (Opciones Comunes)

{
  "compilerOptions": {
    "target": "ESNext",         // Versión de JS a la que compilar (ej. "ES2016", "ESNext")
    "module": "ESNext",         // Sistema de módulos (ej. "CommonJS", "ESNext")
    "strict": true,             // Habilita todas las opciones de comprobación de tipo estricta (recomendado)
    "esModuleInterop": true,    // Permite la interoperabilidad entre módulos CommonJS y ES
    "skipLibCheck": true,       // Omite la comprobación de tipos de archivos de declaración (d.ts)
    "forceConsistentCasingInFileNames": true, // Impide referencias inconsistentes al mismo archivo
    "outDir": "./dist",         // Directorio de salida para los archivos JS compilados
    "rootDir": "./src",         // Directorio raíz de los archivos TS
    "declaration": true,        // Genera archivos .d.ts para tus módulos
    "sourceMap": true,          // Genera archivos .map para depuración
    "jsx": "react-jsx"          // Para proyectos React/JSX ("preserve", "react", "react-jsx")
  },
  "include": ["src/**/*"],  // Archivos a incluir en la compilación
  "exclude": ["node_modules", "dist"] // Archivos a excluir
}

3. 🧩 Tipos Básicos

4. 📝 Anotaciones de Tipo

4.1. Variables

let count: number = 5;
let username: string = "Juan";
let isActiveUser: boolean = false;

4.2. Parámetros de Función y Retorno

function add(a: number, b: number): number {
  return a + b;
}

const greet = (name: string): string => `Hello, ${name}`;

function log(message: string): void {
  console.log(message);
}

5. 📦 Tipos Complejos

5.1. Arrays

let numbers: number[] = [1, 2, 3];
let names: Array<string> = ["Ana", "Luis"]; // Sintaxis genérica

5.2. Objetos

let user: { id: number; name: string; isActive?: boolean } = { // `?` para propiedad opcional
  id: 1,
  name: "Carlos",
};

user.isActive = true;

5.3. Tuplas

Arrays con un número fijo de elementos y tipos específicos en cada posición.

let person: [string, number] = ["Maria", 28];
// let invalidPerson: [string, number] = [28, "Maria"]; // Error

6. 🤝 Uniones e Intersecciones

6.1. Tipos de Unión (|)

Un valor puede ser de uno de los tipos especificados.

let id: number | string = 123;
id = "abc"; // Válido
// id = true; // Error

function printId(id: number | string): void {
  if (typeof id === "string") {
    console.log(id.toUpperCase());
  } else {
    console.log(id.toFixed(2));
  }
}

6.2. Tipos de Intersección (&)

Combina múltiples tipos en uno solo, un valor debe ser de todos los tipos.

type Draggable = {
  drag: () =&gt; void;
};

type Resizable = {
  resize: () =&gt; void;
};

type UIWidget = Draggable & Resizable; // Debe tener ambos métodos

let widget: UIWidget = {
  drag: () =&gt; console.log("Dragging"),
  resize: () =&gt; console.log("Resizing"),
};

7. 🏷️ Tipos Personalizados

7.1. Interfaces

Definen la forma de los objetos. Pueden ser implementadas por clases y extendidas.

interface User {
  readonly id: number; // Propiedad de solo lectura
  name: string;
  email?: string; // Propiedad opcional
}

interface AdminUser extends User { // Extiende la interfaz User
  role: "admin" | "superadmin"; // Tipo literal de unión
  permissions: string[];
}

const normalUser: User = { id: 1, name: "Alice" };
const admin: AdminUser = { id: 2, name: "Bob", role: "admin", permissions: ["manage_users"] };

// normalUser.id = 3; // Error: id es readonly

7.2. Alias de Tipo (type)

Crea un nuevo nombre para un tipo existente. Puede ser usado para cualquier tipo (primitivos, uniones, tuplas, objetos). No puede ser implementado por clases, pero puede ser extendido por intersecciones.

type Age = number;
type UserID = string | number;

type Point = {
  x: number;
  y: number;
};

type CardSuit = "Clubs" | "Diamonds" | "Hearts" | "Spades"; // Tipos literales

const myAge: Age = 25;
const center: Point = { x: 10, y: 20 };
const suit: CardSuit = "Clubs";

Diferencias clave interface vs type:

8. 📊 Enums

Conjuntos de constantes con nombres fáciles de usar.

enum Direction {
  Up,    // 0 por defecto
  Down,  // 1
  Left,  // 2
  Right  // 3
}
console.log(Direction.Up); // 0
console.log(Direction[0]); // "Up"

enum Status {
  Active = "ACTIVE",
  Inactive = "INACTIVE",
  Pending = "PENDING"
}
console.log(Status.Active); // "ACTIVE"

// Uso con otros tipos
function setUserStatus(status: Status): void {
  console.log(`User status set to: ${status}`);
}
setUserStatus(Status.Active);

9. 🚀 Genéricos (Generics)

Permiten escribir componentes o funciones que pueden trabajar con una variedad de tipos en lugar de uno solo, sin perder la seguridad de tipos.

function identity<T>(arg: T): T { // `T` es un placeholder para el tipo
  return arg;
}

let output1 = identity<string>("myString"); // output1 es de tipo string
let output2 = identity<number>(100);       // output2 es de tipo number

interface Box<T> { // Interfaz genérica
  value: T;
}

const stringBox: Box<string> = { value: "Hello" };
const numberBox: Box<number> = { value: 123 };

// Restricciones de tipo (Constraints)
interface Lengthwise {
  length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T { // `T` debe tener una propiedad `length`
  console.log(arg.length);
  return arg;
}

loggingIdentity("hello"); // Válido
loggingIdentity([1, 2, 3]); // Válido
// loggingIdentity(5); // Error: number no tiene 'length'

10. 🏷️ Afirmaciones de Tipo (Type Assertions)

Le dices al compilador que sabes más sobre el tipo de un valor de lo que él puede inferir. No realizan comprobaciones en tiempo de ejecución.

let someValue: unknown = "this is a string";

let strLength: number = (someValue as string).length; // "someValue" es tratado como string
// let strLength: number = (<string>someValue).length; // Sintaxis alternativa

const inputElement = document.getElementById("myInput") as HTMLInputElement;
// inputElement.value ahora tiene acceso a la propiedad 'value'

11. 🛡️ Guardas de Tipo (Type Guards)

Permiten reducir el tipo de una variable dentro de un bloque condicional.

// typeof
function printValue(value: string | number) {
  if (typeof value === "string") {
    console.log(value.toLowerCase()); // 'value' es string aquí
  } else {
    console.log(value.toFixed(2)); // 'value' es number aquí
  }
}

// instanceof
class Cat {
  meow() { console.log("Meow!"); }
}
class Dog {
  bark() { console.log("Woof!"); }
}

function makeSound(animal: Cat | Dog) {
  if (animal instanceof Cat) {
    animal.meow();
  } else {
    animal.bark();
  }
}

// Guarda de Tipo Personalizada
interface Bird {
  fly: () =&gt; void;
}
interface Fish {
  swim: () =&gt; void;
}

function isBird(pet: Bird | Fish): pet is Bird { // Predicado de tipo
  return (pet as Bird).fly !== undefined;
}

function move(pet: Bird | Fish) {
  if (isBird(pet)) {
    pet.fly();
  } else {
    pet.swim();
  }
}

12. 👻 Nulos y Definidos (Null & Undefined)

13. 🛠️ Tipos de Utilidad (Built-in Utility Types)

Funciones genéricas que transforman tipos.

14. 💡 Buenas Prácticas y Consejos

Este cheatsheet te proporciona una referencia completa y concisa de TypeScript, cubriendo los fundamentos y las características esenciales para escribir código seguro, mantenible y escalable.