Creando un objeto según la interfaz de TypeScript: guía completa con ejemplos

Cómo crear un objeto basado en una interfaz en TypeScript: explicación completa con código

¿Alguna vez te has encontrado en una situación en la que TypeScript literalmente te «grita» porque intentas crear un objeto que no coincide con la interfaz? ¿Te suena familiar? Si trabajas con TypeScript aunque sea una semana, seguro que has visto este error:

Type '{}' is missing the following properties from type 'User': name, age

Este es uno de los problemas más populares en Stack Overflow (decenas de miles de visitas), y hoy lo resolveremos de una vez por todas. En este artículo aprenderás cómo crear un objeto basado en una interfaz en TypeScript, cuáles son las formas y cuándo usar cada una.

¿Por qué es tan importante este tema?

TypeScript es una extensión de JavaScript que añade tipado estático. Las interfaces de TypeScript son una herramienta poderosa para describir la estructura de los objetos. Pero los principiantes a menudo se confunden: «Declaré una interfaz, ¿cómo creo ahora un objeto real?»

Sin una comprensión correcta de este mecanismo, perderás horas depurando o, peor aún, usarás any, lo que es un camino directo a perder todas las ventajas de TypeScript.

Forma 1: Asignación directa (la más sencilla)

La forma más obvia de crear un objeto según la interfaz de TypeScript es simplemente asignar un literal de objeto a una variable con el tipo de la interfaz:

interface User {\n  name: string;\n  age: number;\n  email?: string; // campo opcional\n}\n\n// ✅ Correcto: el objeto coincide completamente con la interfaz\nconst user: User = {\n  name: "Ana",\n  age: 28,\n  email: "ana@example.com"\n};\n\n// ✅ También correcto: el campo opcional se puede omitir\nconst userMinimal: User = {\n  name: "Iván",\n  age: 35\n};

Esto funciona, pero hay un detalle: TypeScript verificará que el objeto tenga TODOS los campos obligatorios. Si olvidas name o age, el compilador mostrará un error.

❌ Error típico de principiantes

// ❌ ¡Error! Falta el campo obligatorio 'age'\nconst badUser: User = {\n  name: "Pedro"\n};

Forma 2: Uso del operador as (conversión de tipo)

A veces necesitas crear un objeto gradualmente, por ejemplo, llenándolo desde diferentes fuentes. En estos casos, puedes usar el operador as:

interface Config {\n  apiUrl: string;\n  timeout: number;\n  retries: number;\n}\n\n// Creamos un objeto vacío con conversión de tipo\nconst config = {} as Config;\n\n// Ahora podemos agregar campos uno por uno\nconfig.apiUrl = "https://api.example.com";\nconfig.timeout = 5000;\nconfig.retries = 3;\n\n// ✅ Funciona, pero TEN CUIDADO

⚠️ Advertencia: Esta forma desactiva la verificación de tipos en el momento de la creación del objeto. Podrías omitir accidentalmente un campo obligatorio y descubrirlo solo en tiempo de ejecución. Usa as solo cuando estés seguro de que todos los campos se llenarán.

Forma 3: Función fábrica (recomendada)

La mejor manera de crear un objeto basado en una interfaz en TypeScript es escribir una función fábrica. Esto proporciona un 100% de seguridad de tipos y la posibilidad de establecer valores predeterminados:

interface Product {\n  id: number;\n  title: string;\n  price: number;\n  inStock: boolean;\n  description?: string;\n}\n\n// Función fábrica con parámetros predeterminados\nfunction createProduct(\n  id: number,\n  title: string,\n  price: number,\n  inStock: boolean = true,\n  description?: string\n): Product {\n  return {\n    id,\n    title,\n    price,\n    inStock,\n    ...(description && { description })\n  };\n}\n\n// Uso\nconst laptop = createProduct(1, "Portátil", 999.99);\nconst phone = createProduct(2, "Teléfono inteligente", 599.99, false, "Excelente teléfono");\n\nconsole.log(laptop); // { id: 1, title: 'Portátil', price: 999.99, inStock: true }\nconsole.log(phone)