Skip to content
intermediatePhase 35 · TypeScript

Interfaces

Define object shapes with interfaces, optional properties, and extending interfaces.

45m
0 problems
Topic Progress0%

Defining Interfaces

Defining Interfaces

Interfaces define the shape of objects—they specify what properties an object must have and what types those properties should be.

Basic Interface

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

const user: User = {
  name: "Alice",
  age: 30,
  email: "alice@example.com"
};

Interface with Methods

interface Calculator {
  add(a: number, b: number): number;
  subtract(a: number, b: number): number;
}

const calc: Calculator = {
  add(a, b) { return a + b; },
  subtract(a, b) { return a - b; }
};

Interface with Index Signatures

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

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

Exporting Interfaces

// Export for use in other files
export interface Product {
  id: number;
  name: string;
  price: number;
}

// Import in another file
import { Product } from "./types";

Optional Properties

Optional Properties

Optional Properties

Use ? to make properties optional:

interface User {
  name: string;
  age: number;
  email?: string; // optional
  phone?: string; // optional
}

// Valid
const user1: User = {
  name: "Alice",
  age: 30
};

const user2: User = {
  name: "Bob",
  age: 25,
  email: "bob@example.com"
};

Readonly Properties

Use readonly to make properties immutable:

interface Config {
  readonly apiUrl: string;
  readonly timeout: number;
}

const config: Config = {
  apiUrl: "https://api.example.com",
  timeout: 5000
};

// config.apiUrl = "other"; // Error!

Strict Property Checking

With strictPropertyInitialization, all required properties must be initialized:

interface StrictUser {
  name: string; // must be provided
  age: number;  // must be provided
}

// const user: StrictUser = { name: "Alice" }; // Error!

Extending Interfaces

Extending Interfaces

Basic Extension

Use extends to inherit properties from another interface:

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

interface Employee extends Person {
  employeeId: string;
  department: string;
}

const emp: Employee = {
  name: "Alice",
  age: 30,
  employeeId: "E001",
  department: "Engineering"
};

Multiple Extension

An interface can extend multiple interfaces:

interface HasId {
  id: number;
}

interface HasTimestamp {
  createdAt: Date;
  updatedAt: Date;
}

interface Entity extends HasId, HasTimestamp {
  name: string;
}

const entity: Entity = {
  id: 1,
  name: "Item",
  createdAt: new Date(),
  updatedAt: new Date()
};

Extending vs Intersecting

// Extending interfaces
interface A { a: string; }
interface B extends A { b: number; }

// Intersecting types (similar result)
type C = A & { b: number };

Both achieve similar results, but extending is preferred for interfaces.

Practice Problems

0/3solved
Build Interfaces Component

Create a reusable React component implementing Interfaces. Include proper state management and accessibility.

Solution
// Production-ready component with:
// - Proper TypeScript types
// - Accessibility (ARIA)
// - Error boundaries
// - Loading states
// - Memoization where needed
Interfaces Testing

Write unit and integration tests for Interfaces using React Testing Library.

Solution
// Test coverage:
// 1. Rendering tests
// 2. Interaction tests
// 3. Edge case tests
// 4. Accessibility tests
Interfaces Performance

Optimize Interfaces for performance. Consider memoization, code splitting, and bundle size.

Solution
// Optimization techniques:
// 1. React.memo / useMemo / useCallback
// 2. Code splitting with lazy()
// 3. Virtual scrolling for lists
// 4. Image lazy loading
// 5. Bundle analysis

Quiz

1. How do you make an interface property optional?

Question 1 options

2. How do you make an interface property immutable?

Question 2 options

3. Can an interface extend multiple interfaces?

Question 3 options

4. What does an interface define?

Question 4 options

Flashcards

Question

How do you make an interface property optional?

Click to reveal answer

Answer

Add ? after the property name: name?: string

Question

How do you extend an interface?

Click to reveal answer

Answer

Use the extends keyword: interface B extends A { }

Question

What is a readonly property?

Click to reveal answer

Answer

A property that cannot be modified after initialization

Question

Can an interface have index signatures?

Click to reveal answer

Answer

Yes, using [key: string]: Type syntax

Question

What is Interfaces?

Click to reveal answer

Answer

Interfaces is a key concept in frontend development.

Revision Notes

Key Takeaways

  • 1.Interfaces define the shape of objects
  • 2.Use ? for optional properties
  • 3.Use readonly for immutable properties
  • 4.Interfaces can extend other interfaces
  • 5.Interfaces are ideal for object types and class contracts

Interview Tips

  • •Explain the difference between interfaces and type aliases
  • •Know when to use optional vs required properties
  • •Understand interface extension vs intersection types

Cheat Sheet

Cheat Sheet

Basic Interface

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

Optional & Readonly

interface Config {
  name: string;
  optional?: string;
  readonly id: number;
}

Extending

interface Person {
  name: string;
}
interface Employee extends Person {
  id: string;
}

Index Signatures

interface Dict {
  [key: string]: value;
}