KWAS Academy
Learn. Build. Master.
QUICK START:HTMLCSSJavaScriptTypeScriptPythonSQLReactNext.jsNode.jsDSASystem DesignDevOpsCybersecurityAI / ML
Intermediate 18 min readModule: Module 3: Interfaces & Type Aliases

Interfaces vs Type Aliases & Extending Contracts

Learn when to use interface vs type, extending with 'extends' or '&', and readonly/optional properties.

What You Will Learn in This Lesson

  • Interface inheritance with the 'extends' keyword
  • Type aliases for primitives, unions, and tuples
  • Readonly and optional (?) property modifiers

Introduction & Core Concept

Interfaces and Type Aliases both define object shapes, but have distinct capabilities regarding declaration merging and union representations.
WHY DOES THIS MATTER IN THE REAL WORLD?

Interfaces are ideal for open public API definitions, while type aliases excel at complex unions and mapped transformations.

Extended Interface Hierarchy

typescript
typescript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
interface Identifiable {
  readonly id: string;
}
 
interface UserProfile extends Identifiable {
  name: string;
  email: string;
  avatarUrl?: string;
}
 
const user: UserProfile = {
  id: "usr_101",
  name: "Alex Dev",
  email: "alex@kwas.dev"
};
console.log("User:", user.name);

Line-by-Line Technical Breakdown

1Interfaces support declaration merging across multiple declaration files.

Try It Yourself (Interactive Editor)

Modify the code in real-time and click Run to test live browser output and console logs.

Intelligent Code Runner & Live Sandbox[TYPESCRIPT]
TYPESCRIPT SOURCE EDITOR
Interactive Live Code

Industry Best Practices & Professional Standards

  • Use interface for object models and type for unions/primitives.

Lesson Summary & Core Takeaways

  • Interfaces and type aliases form the structural bedrock of TypeScript.