Interfaces Basicas (Repaso Profundo)

Propiedades opcionales, readonly, índices y firmas de llamada.

Repaso de Interfaces

Una interface define la forma de un objeto. Es cómo un contrato que el objeto debe cumplir.

typescript

interface Usuario {
  id: number;
  nombre: string;
  email: string;
}

const user: Usuario = {
  id: 1,
  nombre: "Ana",
  email: "ana@mail.com",
};

Propiedades opcionales

Usa ? para propiedades que pueden no existir.

typescript

interface Perfil {
  nombre: string;
  bio?: string;      // Opcional
  website?: string;  // Opcional
}

const perfil: Perfil = { nombre: "Ana" }; // OK

Propiedades readonly

No pueden ser modificadas después de la creación.

typescript

interface Config {
  readonly apiUrl: string;
  readonly version: number;
}

const config: Config = { apiUrl: "https://api.com", version: 1 };
// config.apiUrl = "otra"; // Error: readonly

Index signatures

Para objetos con propiedades dinámicas.

typescript

interface Diccionario {
  [clave: string]: string;
}

const traducciones: Diccionario = {
  hello: "hola",
  goodbye: "adiós",
};

// Puedes agregar más claves
traducciones["thanks"] = "gracias";

Firmas de llamada

Para objetos que son funciones.

typescript

interface FuncionConNombre {
  (x: number, y: number): number;
  descripcion: string;
}

const sumar: FuncionConNombre = Object.assign(
  (x: number, y: number) => x + y,
  { descripcion: "Suma dos numeros" }
);

sumar(1, 2);              // 3
sumar.descripcion;         // "Suma dos numeros"

Interfaces con tipos complejos

typescript

interface Empresa {
  nombre: string;
  empleados: Empleado[];
  dirección: {
    calle: string;
    ciudad: string;
  };
}

interface Empleado {
  nombre: string;
  cargo: string;
}

Ejercicio pratico

Crea una interface 'Producto' con id (readonly), nombre, precio y opciones (diccionario).

exercise.ts

Resultado

Haz clic en "Ejecutar" para ver el resultado...

Herencia con Extends