Priygop - Leading Professional Development Platform

An interface defines the structure (shape) of an object. It specifies what properties an object must have and their types. If an object doesn't match the interface, TypeScript shows an error. Interfaces are purely a TypeScript feature — they don't exist in compiled JavaScript.

interface Features

interface Name { } — Defines the shape of an object

Required properties — Must be present in every object

Optional properties — Use ? to make them optional: age?: number

readonly properties — Cannot be changed after creation

Interfaces can extend other interfaces

Used for function parameters to ensure correct shape

Interfaces Example

Example

// Define an interface
interface User {
    id: number;
    name: string;
    email: string;
    age?: number;       // Optional property
    readonly role: string; // Cannot be changed
}

// Create objects that match the interface
const user1: User = {
    id: 1,
    name: "Alice",
    email: "alice@example.com",
    age: 25,
    role: "admin"
};

const user2: User = {
    id: 2,
    name: "Bob",
    email: "bob@example.com",
    // age is optional — can be omitted
    role: "user"
};

// Function that accepts a User interface
function greetUser(user: User): string {
    return `Hello, ${user.name}! Role: ${user.role}`;
}

console.log(greetUser(user1));
console.log(greetUser(user2));

Try It Yourself: Interfaces

Try It Yourself: InterfacesJavaScript

JavaScript Editor

✓ ValidTab = 2 spaces

// Simulating TypeScript interfaces in JavaScript
// In TypeScript: interface Product { id: number; name: string; price: number; }

function createProduct(id, name, price, inStock = true) {
    return { id, name, price, inStock };
}

function displayProduct(product) {
    const status = product.inStock ? "In Stock" : "Out of Stock";
    console.log(`[${product.id}] ${product.name} — ₹${product.price} (${status})`);
}

function applyDiscount(product, percent) {
    const discounted = product.price * (1 - percent / 100);
    return { ...product, price: Math.round(discounted) };
}

// Create products (like TypeScript interface objects)
const products = [
    createProduct(1, "Laptop",     45000),
    createProduct(2, "Mouse",      599),
    createProduct(3, "Keyboard",   1299, false),
    createProduct(4, "Monitor",    12000),
];

console.log("=== Product Catalog ===");
products.forEach(displayProduct);

// Apply 10% discount to all in-stock products
console.log("\n=== After 10% Discount ===");
products
    .filter(p => p.inStock)
    .map(p => applyDiscount(p, 10))
    .forEach(displayProduct);

// Simulating TypeScript interfaces in JavaScript
// In TypeScript: interface Product { id: number; name: string; price: number; }

function createProduct(id, name, price, inStock = true) {
    return { id, name, price, inStock };
}

function displayProduct(product) {
    const status = product.inStock ? "In Stock" : "Out of Stock";
    console.log(`[${product.id}] ${product.name} — ₹${product.price} (${status})`);
}

function applyDiscount(product, percent) {
    const discounted = product.price * (1 - percent / 100);
    return { ...product, price: Math.round(discounted) };
}

// Create products (like TypeScript interface objects)
const products = [
    createProduct(1, "Laptop",     45000),
    createProduct(2, "Mouse",      599),
    createProduct(3, "Keyboard",   1299, false),
    createProduct(4, "Monitor",    12000),
];

console.log("=== Product Catalog ===");
products.forEach(displayProduct);

// Apply 10% discount to all in-stock products
console.log("\n=== After 10% Discount ===");
products
    .filter(p => p.inStock)
    .map(p => applyDiscount(p, 10))
    .forEach(displayProduct);

Result

Click ▶ Run to see the result

Edit the code on the left, then click Run

JavaScript|34 lines|1109 chars|✓ Valid syntax

UTF-8

Interfaces & Objects

TypeScript Interfaces

interface Features

Interfaces Example

Try It Yourself: Interfaces

Quick Quiz