Interface vs type alias decision in Typescript - Visual Side-by-Side Comparison

Concept Flow - Interface vs type alias decision

Start: Need to define a shape

↓

Is it an object or function shape?

↓

Use interface

↓

Supports extends, merges

↓

Choose based on use case

↓

End

Decide between interface and type alias by checking if you need object shapes with extension or union types and primitives.

Execution Sample

Typescript

interface User {
  name: string;
}

type ID = number | string;

Defines a User interface for an object and a type alias ID for a union of number or string.

Execution Table

Step	Action	Evaluation	Result
1	Define interface User	User has property name:string	User interface created
2	Define type alias ID	ID is number|string union	ID type alias created
3	Use User in code	User can be extended or implemented	Flexible object shape
4	Use ID in code	ID can be number or string	Flexible union type
5	Decision	If object shape with extension needed	Use interface
6	Decision	If union or primitive needed	Use type alias

💡 Decision made based on shape and usage needs

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
User	undefined	interface with name:string	unchanged	used in code	interface shape
ID	undefined	undefined	type alias number|string	used in code	union type alias

Key Moments - 3 Insights

Why choose interface over type alias for objects?

Interfaces support declaration merging and extension, which type aliases do not, as shown in execution_table rows 1 and 5.

Can type aliases represent union types?

Yes, type aliases can represent unions and primitives, unlike interfaces, as shown in execution_table row 2 and 6.

Is it possible to extend a type alias?

No, type aliases cannot be extended like interfaces; this is why interfaces are preferred for extensible object shapes (rows 3 and 5).

Visual Quiz - 3 Questions

Look at the execution_table, at which step is the type alias ID defined?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Check the 'Action' column for defining type alias ID in execution_table row 2

According to variable_tracker, what is the state of User after step 1?

A interface with name:string

B type alias number|string

C undefined

D used in code

💡 Hint

Look at the 'After 1' column for User in variable_tracker

If you need to represent a union type, which should you choose according to the decision steps?

A Interface

B Either interface or type alias

C Type alias

D Neither

💡 Hint

Refer to execution_table rows 2 and 6 about union types and type alias usage

Concept Snapshot

interface MyObj { prop: type }  // for object shapes
interface supports extension and merging

type MyType = string | number;  // for unions, primitives
no extension, but flexible types

Choose interface for extensible objects
Choose type alias for unions/primitives

Full Transcript

This visual execution shows how to decide between interface and type alias in TypeScript. First, you define an interface User with a name property, creating an object shape that supports extension and merging. Then, you define a type alias ID as a union of number or string, useful for flexible types beyond objects. The execution table traces these definitions and their usage. Variable tracker shows how User and ID change from undefined to their defined forms. Key moments clarify why interfaces are chosen for extensible objects and type aliases for unions or primitives. The quiz tests understanding of when and why to use each. The snapshot summarizes the syntax and decision rules for quick reference.