TypeScript — Interfaces: Define Contracts for Object Structures

Introduction – What Are Interfaces in TypeScript?

In TypeScript, an interface defines the shape of an object. It describes what properties and methods an object should have, without providing implementation. Interfaces are a core TypeScript feature that enables structured, reusable, and scalable code, especially in large applications and API design.

In this guide, you’ll learn:

• How to declare and implement interfaces
• The difference between interfaces and type aliases
• Optional, readonly, function, and indexable properties
• Extending and combining interfaces
• Real-world use cases and best practices

What Is an Interface?

An interface defines a contract for the structure of an object. It can include property names, types, method signatures, and even inherit from other interfaces.

Basic Syntax:

interface User {
  name: string;
  age: number;
}

const person: User = {
  name: "Alice",
  age: 30
};

Explanation:
The User interface defines that an object must have a name (string) and age (number). Any object assigned to type User must match this structure.

Optional Properties

Use ? to define optional properties in an interface.

interface Profile {
  username: string;
  bio?: string;
}

const user1: Profile = { username: "techie" }; // 
const user2: Profile = { username: "dev", bio: "TS lover" }; // 

Readonly Properties

Use readonly to ensure a property cannot be changed after initialization.

interface Settings {
  readonly theme: string;
}

const config: Settings = { theme: "dark" };
// config.theme = "light"; //  Error

Interface with Methods

Interfaces can define method signatures.

interface Logger {
  log(message: string): void;
}

const consoleLogger: Logger = {
  log(msg) {
    console.log("LOG:", msg);
  }
};

Function Types with Interfaces

You can describe the structure of a function using an interface.

interface Greeter {
  (name: string): string;
}

const greet: Greeter = (name) => `Hello, ${name}!`;

Indexable Interfaces

Use index signatures to describe objects with dynamic keys.

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

const translations: StringMap = {
  hello: "Hola",
  goodbye: "Adiós"
};

Explanation:
Any number of string keys are allowed, and their values must be string.

Extending Interfaces

Interfaces can inherit from other interfaces using extends.

interface Person {
  name: string;
}

interface Employee extends Person {
  employeeId: number;
}

const emp: Employee = {
  name: "Bob",
  employeeId: 101
};

This promotes code reuse and allows complex structures to be built from simpler ones.

Interface vs Type Alias

Use interface when you model object-like shapes or plan to extend.
Use type for complex combinations and primitives.

Real-World Use Cases

• Modeling API response objects
• Describing props in React components
• Defining configurations and options
• Creating reusable structures across modules

Common Mistakes & How to Avoid Them

Summary – Recap & Next Steps

Interfaces in TypeScript provide a clear and scalable way to define the shape of data structures. They make your code more readable, maintainable, and extensible, especially when working with objects and class-based code.

Key Takeaways:

• Use interfaces to define object structures
• Support optional (?) and readonly properties
• Interfaces can define function types and dynamic keys
• Extend interfaces to build complex models
• Prefer interfaces for scalable and structured codebases

Real-world relevance: Interfaces are widely used in TypeScript applications, APIs, UI components, state management, and data modeling.

FAQs – Interfaces in TypeScript

Can interfaces have optional properties?
Yes. Use ? to indicate a property is optional.

Are interfaces available at runtime?
No. Interfaces are compile-time only and do not exist in the final JavaScript code.

Can interfaces extend other interfaces?
Absolutely. Use extends to inherit from one or more interfaces.

When should I use interface vs type?
Use interface for objects and structures, and type for primitives, unions, and advanced compositions.

Can I use an interface to describe a function?
Yes. Interfaces can describe function signatures and callable structures.