Introducción a TypeScript

Fundamentos de TypeScript

TypeScript es un superconjunto tipado de JavaScript que compila a JavaScript plano. Agrega tipado estático opcional y programación orientada a objetos basada en clases. TypeScript ayuda a detectar errores en tiempo de compilación.

Tipos Básicos

// Tipos primitivos
let name: string = "Alice";
let age: number = 25;
let isActive: boolean = true;

// Arrays
let numbers: number[] = [1, 2, 3];
let names: Array<string> = ["Alice", "Bob"];

// Tuplas
let tuple: [string, number] = ["Alice", 25];

// Enum
enum Status {
  Pending = "PENDING",
  Active = "ACTIVE",
  Completed = "COMPLETED"
}

// Unknown - any seguro
let input: unknown = getUserInput();
if (typeof input === "string") {
  console.log(input.toUpperCase());
}

// Void - sin valor de retorno
function logMessage(message: string): void {
  console.log(message);
}

Interfaces

interface User {
  id: number;
  name: string;
  email: string;
  age?: number;             // Propiedad opcional
  readonly createdAt: Date; // No se puede modificar
}

const user: User = {
  id: 1,
  name: "Alice",
  email: "alice@example.com",
  createdAt: new Date()
};

// Extender interfaces
interface AdminUser extends User {
  role: "admin";
  permissions: string[];
}

Genéricos

// Función genérica
function identity<T>(value: T): T {
  return value;
}

const str = identity("hello"); // tipo: string
const num = identity(42);      // tipo: number

// Interfaz genérica
interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

// Restricciones genéricas
interface HasLength {
  length: number;
}

function logLength<T extends HasLength>(item: T): void {
  console.log(item.length);
}

logLength("hello");    // OK
logLength([1, 2, 3]);  // OK

Tipos de Utilidad

type UserPreview = Pick<User, "id" | "name">;
type UserWithoutEmail = Omit<User, "email">;
type ReadonlyUser = Readonly<User>;
type PartialUser = Partial<User>;
type RequiredUser = Required<User>;

// Tipos union
type Status = "pending" | "active" | "completed";

// Guardas de tipo
function isAdmin(person: User | Admin): person is Admin {
  return person.type === "admin";
}