Documentation Index
Fetch the complete documentation index at: https://mintlify.com/diegoromemora27-creator/HTMLCSSEXPLAIN/llms.txt
Use this file to discover all available pages before exploring further.
What is an Interface?
An interface is like a “contract” or “blueprint” that defines what properties an object must have and their types.
Think of it like an architectural plan: it defines the structure before you build.
Basic Syntax
interface InterfaceName {
property1: type;
property2: type;
optionalProperty?: type; // The ? indicates it's optional
}
Simple Example
interface Person {
name: string;
age: number;
email?: string; // Optional
}
const juan: Person = { name: "Juan", age: 25 }; // ✅ Valid
const pedro: Person = { name: "Pedro" }; // ❌ Missing 'age'
const ana: Person = {
name: "Ana",
age: 30,
email: "ana@example.com" // ✅ Optional properties can be included
};
Real-World Example: Category Interface
From our project, this interface describes the data structure the API sends for each category:
interface Category {
id: number; // Unique identifier (e.g., 1, 2, 3)
name: string; // Category name (e.g., "Electronics", "Clothes")
image: string; // URL of the category image
slug: string; // URL-friendly version of name (e.g., "electronics")
}
Nested Interfaces: Product
Notice how the category property uses the Category interface we just defined:
interface Product {
id: number; // Unique product identifier
title: string; // Product name/title
slug: string; // URL-friendly title
price: number; // Product price (number, not string!)
description: string; // Detailed description
category: Category; // Complete Category object (nested interface)
images: string[]; // Array of image URLs (can have multiple)
}
Using the Product Interface
const laptop: Product = {
id: 1,
title: "Gaming Laptop",
slug: "gaming-laptop",
price: 1299.99,
description: "High-performance laptop for gaming",
category: {
id: 2,
name: "Electronics",
image: "https://example.com/electronics.jpg",
slug: "electronics"
},
images: [
"https://example.com/laptop-1.jpg",
"https://example.com/laptop-2.jpg"
]
};
Application State Interface
Interfaces are perfect for defining your app’s state structure:
interface AppState {
status: LoadingState; // Current loading state (uses the enum)
products: Product[]; // Array of products (uses Product interface)
error: string | null; // Error message OR null if no error
}
let appState: AppState = {
status: LoadingState.Idle, // Start in "idle" state
products: [], // No products at start (empty array)
error: null // No errors at start
};
Why Use Interfaces?
1. The Editor Warns You About Missing Properties
const broken: Product = {
id: 1,
title: "Test"
// ❌ Error: Missing required properties: slug, price, description, category, images
};
2. Autocompletion While Coding
function showProduct(product: Product) {
console.log(product.); // Editor suggests: id, title, price, etc.
}
3. Catch Typos Before Running
const product: Product = { /* ... */ };
console.log(product.titel); // ❌ Error: Did you mean 'title'?
4. Self-Documenting Code
Anyone reading your code knows exactly what data structure to expect:
function createProductCard(product: Product): string {
// I know product has: id, title, price, description, category, images
}
Optional Properties
Use ? to mark properties that might not always exist:
interface User {
id: number;
name: string;
email?: string; // Might not have email
phone?: string; // Might not have phone
}
const user1: User = { id: 1, name: "John" }; // ✅ Valid
const user2: User = { id: 2, name: "Jane", email: "jane@example.com" }; // ✅ Also valid
Arrays in Interfaces
interface Product {
images: string[]; // Array of strings
}
const product: Product = {
images: [
"image1.jpg",
"image2.jpg",
"image3.jpg"
]
};
Interfaces vs Types
You might also see type used similarly:
// Interface
interface Product {
id: number;
title: string;
}
// Type (does the same thing here)
type Product = {
id: number;
title: string;
};
interface is preferred. Use type for unions, primitives, and complex types.
Next Steps
