Hoja de Trucos de TypeScript
Última actualización
Tipos básicos
Los tipos primitivos y cómo anotar variables.
| Operación | Sintaxis |
|---|---|
| Cadena (string) | let name: string = "Ada"; |
| Número | let age: number = 25; |
| Booleano | let ok: boolean = true; |
| Array de T | let xs: number[] = [1, 2, 3]; |
| Array genérico | let xs: Array<string> = []; |
| Tupla | let pair: [string, number] = ["a", 1]; |
| Any (sin tipado) | let x: any = 1; |
| Unknown (any seguro) | let x: unknown = JSON.parse(s); |
| Void (sin retorno) | function log(): void { … } |
| Never (nunca retorna) | function fail(): never { throw … } |
| Null / undefined | let n: null = null; |
Inferencia y anotaciones de tipos
Cuándo dejar que TS infiera y cuándo anotar.
| Operación | Sintaxis |
|---|---|
| Inferido del valor | let count = 0; // number |
| Anotación explícita | let count: number = 0; |
| Parámetro de función | function add(a: number, b: number) { … } |
| Tipo de retorno | function add(a: number, b: number): number { … } |
| Función flecha | const sq = (x: number): number => x * x; |
| Aserción de tipo | const el = input as HTMLInputElement; |
| Aserción const (literal) | const dirs = ["up", "down"] as const; |
| Aserción de no-nulo | el!.focus(); |
Interfaces
Describe la forma de un objeto.
| Operación | Sintaxis |
|---|---|
| Declarar | interface User { id: number; name: string; } |
| Propiedad opcional | interface User { age?: number; } |
| Propiedad readonly | interface User { readonly id: number; } |
| Firma de método | interface Logger { log(msg: string): void; } |
| Extender otra interfaz | interface Admin extends User { role: string; } |
| Firma de índice | interface Map { [key: string]: number; } |
| Implementar en una clase | class Db implements Logger { … } |
Alias de tipo y uniones
Nombra un tipo y combina tipos con | y &.
| Operación | Sintaxis |
|---|---|
| Alias de tipo | type ID = string | number; |
| Alias de objeto | type User = { id: number; name: string }; |
| Tipo unión | type Status = "idle" | "loading" | "done"; |
| Tipo intersección | type Admin = User & { role: string }; |
| Tipo literal | type Yes = "yes"; |
| Anulable | type Maybe<T> = T | null | undefined; |
| Alias de función | type Handler = (e: Event) => void; |
Funciones
Parámetros tipados, retornos y sobrecargas.
| Operación | Sintaxis |
|---|---|
| Parámetro opcional | function greet(name?: string) { … } |
| Parámetro por defecto | function greet(name = "friend") { … } |
| Parámetros rest | function sum(...ns: number[]): number { … } |
| Tipo de función | let fn: (a: number) => number; |
| Interfaz invocable | interface Fn { (x: number): number; } |
| Firmas de sobrecarga | function f(x: string): string; function f(x: number): number; function f(x: any) { return x; } |
| Retorno void ignorado | const cb: () => void = () => 42; // ok |
Clases
Clases con modificadores de acceso y propiedades de parámetro.
| Operación | Sintaxis |
|---|---|
| Declarar una clase | class User { name: string; } |
| Constructor | constructor(name: string) { this.name = name; } |
| Propiedad de parámetro | constructor(public name: string) {} |
| Public / private / protected | private id: number; |
| Campo readonly | readonly id: number; |
| Miembro estático | static count = 0; |
| Getter / setter | get name() { return this._name; } |
| Herencia | class Admin extends User { … } |
| Clase abstracta | abstract class Shape { abstract area(): number; } |
Genéricos
Tipos reutilizables parametrizados por otros tipos.
| Operación | Sintaxis |
|---|---|
| Función genérica | function id<T>(x: T): T { return x; } |
| Llamar con tipo explícito | id<string>("hi"); |
| Interfaz genérica | interface Box<T> { value: T; } |
| Alias genérico | type Pair<A, B> = [A, B]; |
| Clase genérica | class Stack<T> { items: T[] = []; } |
| Restricción con extends | function len<T extends { length: number }>(x: T) { return x.length; } |
| Parámetro de tipo por defecto | interface Box<T = string> { value: T; } |
| Operador keyof | type K = keyof User; // "id" | "name" |
| Acceso por índice | type Name = User["name"]; |
Narrowing
Reduce una unión a un solo tipo en tiempo de ejecución.
| Operación | Sintaxis |
|---|---|
| Comprobación con typeof | if (typeof x === "string") { … } |
| Comprobación con instanceof | if (e instanceof Error) { … } |
| Operador in | if ("name" in obj) { … } |
| Narrowing por igualdad | if (status === "done") { … } |
| Por veracidad | if (value) { … } |
| Type guard personalizado | function isUser(x: any): x is User { return "id" in x; } |
| Unión discriminada | type Shape = { kind: "sq"; size: number } | { kind: "ci"; r: number }; |
| Exhaustividad con never | const _: never = shape; |
Enums
Conjuntos de constantes con nombre.
| Operación | Sintaxis |
|---|---|
| Enum numérico | enum Direction { Up, Down, Left, Right } |
| Enum de cadenas | enum Status { Idle = "IDLE", Done = "DONE" } |
| Usar un valor | let d: Direction = Direction.Up; |
| Const enum (inlineado) | const enum Color { Red, Green, Blue } |
| Unión de literales (moderno) | type Status = "idle" | "done"; |
Utility types
Helpers integrados que transforman tipos existentes.
| Operación | Sintaxis |
|---|---|
| Todas las props opcionales | Partial<User> |
| Todas las props requeridas | Required<User> |
| Todas las props readonly | Readonly<User> |
| Seleccionar un subconjunto de claves | Pick<User, "id" | "name"> |
| Omitir una o más claves | Omit<User, "password"> |
| Objeto con claves dadas | Record<string, number> |
| Excluir de una unión | Exclude<"a" | "b" | "c", "a"> |
| Mantener solo de una unión | Extract<"a" | "b", "a" | "c"> |
| Quitar null / undefined | NonNullable<string | null> |
| Tipo de retorno de función | ReturnType<typeof fn> |
| Tupla de parámetros | Parameters<typeof fn> |
| Tipo de promesa resuelta | Awaited<Promise<string>> |
Módulos
Importar y exportar entre archivos.
| Operación | Sintaxis |
|---|---|
| Export con nombre | export function add(a: number, b: number) { … } |
| Export por defecto | export default class User { … } |
| Re-exportar | export { User } from "./user"; |
| Import con nombre | import { add } from "./math"; |
| Import por defecto | import User from "./user"; |
| Import solo tipo | import type { User } from "./user"; |
| Importar todo | import * as math from "./math"; |
| Referencia triple-slash | /// <reference types="node" /> |
tsconfig esenciales
Los flags del compilador que vale la pena conocer.
| Opción | Efecto |
|---|---|
"strict": true | Habilita todas las comprobaciones del modo estricto (recomendado). |
"target": "ES2022" | Versión de JavaScript que emite tsc. |
"module": "ESNext" | Sistema de módulos en la salida. |
"moduleResolution": "bundler" | Resuelve módulos como lo hacen los bundlers modernos. |
"jsx": "react-jsx" | Habilita JSX para React 17+. |
"esModuleInterop": true | Imports por defecto más limpios desde CommonJS. |
"skipLibCheck": true | Omite el chequeo de tipos en node_modules (más rápido). |
"noEmit": true | Solo verificación de tipos: el bundler emite la salida. |
La sintaxis de TypeScript que más usas, en una sola página. Esta hoja de trucos de TypeScript es una referencia rápida para el día a día con TS: tipos básicos, interfaces, alias de tipo, genéricos, uniones, narrowing y los utility types integrados.
Todo lo que hay aquí es TypeScript estándar que compila con tsc y se ejecuta en cualquier lugar donde corra JavaScript moderno. Copia lo que necesites o prueba cualquier fragmento en vivo en el playground de TypeScript, sin instalar nada.
Preguntas frecuentes sobre la hoja de trucos de TypeScript
¿Esta hoja de trucos de TypeScript es gratis?
Sí. Esta hoja de trucos de TypeScript es completamente gratis, sin necesidad de registrarse. Guárdala en favoritos y vuelve cuando necesites consultar un tipo, una interfaz o un utility type.
¿Cuál es la diferencia entre una interfaz y un alias de tipo?
Ambos pueden describir la forma de un objeto y, en la mayoría de los casos cotidianos, son intercambiables. Las interfaces se pueden reabrir y extender entre archivos (declaration merging), lo cual es útil para tipos de librerías. Los alias de tipo pueden nombrar uniones, intersecciones, tuplas y mapped types: formas que no se pueden expresar con
interface. Una regla común: usa interface para formas de objeto públicas y type para uniones, tuplas y tipos calculados.¿Cuál es la diferencia entre any y unknown?
any desactiva totalmente el chequeo de tipos: el compilador te dejará hacer cualquier cosa con él. unknown es seguro: debes acotarlo (con typeof, instanceof o un type guard) antes de poder usarlo. Prefiere unknown para valores de fuentes externas como JSON.parse o fetch: te obliga a validar antes de usar.¿Necesito aprender JavaScript antes que TypeScript?
Sí: TypeScript es JavaScript con un sistema de tipos encima, así que todo lo que sabes de JS te sirve. Si aún estás afianzando los fundamentos (arrays, objetos, async/await), la hoja de trucos de JavaScript es un buen punto de partida y el curso gratis de JavaScript de Coddy cubre lo mismo de forma interactiva.
¿Puedo practicar TypeScript online?
Sí. Abre el playground de TypeScript para ejecutar cualquier fragmento de esta hoja de trucos en tu navegador, sin instalar nada. Cuando quieras estructura, aprende desde el landing de JavaScript y aplica los tipos de esta página encima.
Recursos relacionados
Más hojas de referencia
