0Pricing
Frontend Academy · Lección

Interfaces y tipos de objeto

Describa las formas de los objetos con interface y type, extienda interfaces, use propiedades opcionales con ? y readonly para garantizar la inmutabilidad.

Interfaces y tipos de objeto es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

interface frente a type

Tanto interface como type describen estructuras de objetos. La diferencia clave es que las interfaces pueden fusionarse (declaration merging) y, por lo general, se prefieren para definir estructuras de API públicas. Los alias de tipo son más flexibles para tipos complejos.

// interface:
interface User {
  id: number;
  name: string;
}

// type alias (equivalent for objects):
type User = {
  id: number;
  name: string;
};

Definición de una interfaz

Utilice interface para definir la estructura de un objeto. Todas las propiedades son obligatorias de forma predeterminada. Separe las propiedades con punto y coma.

interface Product {
  id: number;
  name: string;
  price: number;
  description: string;
  inStock: boolean;
  category: string;
}

Propiedades opcionales y de solo lectura

Marque las propiedades como opcionales con ?. Utilice readonly para impedir su mutación. readonly impone la inmutabilidad en tiempo de compilación.

interface Config {
  host: string;
  port?: number;          // optional: number | undefined
  readonly apiKey: string; // can't change after assignment
}

const config: Config = { host: 'localhost', apiKey: 'abc' };
config.port = 8080;       // OK
config.apiKey = 'new';    // Error: readonly

Extensión de interfaces

Utilice extends para crear una interfaz nueva que incluya todas las propiedades de otra. Se admite la herencia múltiple.

interface Animal {
  name: string;
  sound(): string;
}

interface Dog extends Animal {
  breed: string;
  fetch(): void;
}

interface ServiceDog extends Dog {
  task: string;
}

Firmas de índice — claves dinámicas

Cuando no conoce de antemano los nombres de las propiedades, pero sí conoce los tipos de sus valores, utilice una firma de índice.

interface StringMap {
  [key: string]: string;
}

const headers: StringMap = {
  'Content-Type': 'application/json',
  'Authorization': 'Bearer token123'
};

// Also for translating:
interface Translations {
  [locale: string]: { [key: string]: string };
}

Tipos de función en interfaces

Defina firmas de métodos dentro de una interfaz; funcionan tanto la sintaxis abreviada como la sintaxis completa de propiedad.

interface Logger {
  log(message: string): void;
  warn(message: string): void;
  error(message: string, err?: Error): void;
}

// Also valid:
interface Logger2 {
  log: (message: string) => void;
}

Implementación de interfaces en clases

Una clase puede implement una o más interfaces. TypeScript verifica que la clase proporcione todos los miembros obligatorios.

interface Serialisable {
  serialise(): string;
  deserialise(data: string): this;
}

class User implements Serialisable {
  constructor(public name: string) {}
  serialise() { return JSON.stringify({ name: this.name }); }
  deserialise(data: string) {
    const obj = JSON.parse(data);
    return new User(obj.name) as this;
  }
}

Fusión de declaraciones

Varias declaraciones de interface con el mismo nombre se fusionan en una sola. Es útil para ampliar tipos de terceros. Los alias de tipo no admiten esta función.

interface Window {
  myPlugin: { version: string };
}
// Now window.myPlugin is typed everywhere

Tipos de objetos anidados

Las propiedades de una interfaz pueden tener a su vez tipos de objeto, ya sea de forma directa o mediante una referencia a otra interfaz.

interface Order {
  id: string;
  customer: {
    name: string;
    email: string;
  };
  items: Array<{
    productId: string;
    quantity: number;
    price: number;
  }>;
  total: number;
}

Tipado estructural — duck typing

TypeScript utiliza tipado estructural: un valor satisface un tipo si tiene al menos las propiedades obligatorias. No necesita una declaración explícita de implements. Cualquier objeto con la estructura adecuada es compatible.

interface Named {
  name: string;
}

function greet(obj: Named) {
  console.log(`Hello, ${obj.name}!`);
}

// No 'implements Named' needed:
greet({ name: 'Alice', age: 30 }); // OK — has the name property

Uniones discriminadas con interfaces

Añada una propiedad discriminante de tipo literal para diferenciar las variantes de una unión. TypeScript restringe el tipo en switch/if basándose en el discriminante.

interface Circle { kind: 'circle'; radius: number; }
interface Square { kind: 'square'; side: number; }
type Shape = Circle | Square;

function area(shape: Shape): number {
  switch (shape.kind) {
    case 'circle': return Math.PI * shape.radius ** 2;
    case 'square': return shape.side ** 2;
  }
}

Comprobación rápida

¿Cuál es la diferencia clave entre interface y type en TypeScript?

Resumen: interfaces

interface describe estructuras de objetos con propiedades obligatorias, opcionales y de solo lectura. Amplíe interfaces con extends. Utilice firmas de índice para claves dinámicas. Las clases implementan interfaces. La fusión de declaraciones es exclusiva de las interfaces. TypeScript utiliza tipado estructural: lo que importa es la estructura, no la declaración explícita.

Preguntas frecuentes

¿La lección «Interfaces y tipos de objeto» es gratis?

Sí — el texto completo de «Interfaces y tipos de objeto» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Interfaces y tipos de objeto»?

Describa las formas de los objetos con interface y type, extienda interfaces, use propiedades opcionales con ? y readonly para garantizar la inmutabilidad. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Interfaces y tipos de objeto»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Por qué TypeScript: los tipos detectan errores en compilación
  2. Tipos primitivos, uniones y alias de tipos
  3. Interfaces y tipos de objeto
  4. Compilar TS y tsconfig.json
← Volver a Frontend Academy