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.

Practice

1. Which statement best describes when to use an interface instead of a type alias in TypeScript?

easy

A. Use interface when you want to extend or merge object shapes.

B. Use interface only for primitive types like string or number.

C. Use interface to create union or tuple types.

D. Use interface when you want to name any type, including functions.

Solution

1. Step 1: Understand interface capabilities

   Interfaces are designed to describe object shapes and support extension and merging.

2. Step 2: Compare with type alias features

   Type aliases can name any type but do not support merging and are less suited for extension of object shapes.

3. Final Answer:

   Use interface when you want to extend or merge object shapes. -> Option A

4. Quick Check:

   Interface = extension and merging [OK]

Hint: Interfaces merge and extend; type aliases do not [OK]

Common Mistakes:

• Thinking interfaces can name union types
• Believing type aliases support merging
• Using interface for primitives only

2. Which of the following is the correct syntax to declare a type alias for a union of string literals?

easy

A. interface Status = 'success' | 'error';

B. interface Status: 'success' | 'error';

C. type Status: 'success' | 'error';

D. type Status = 'success' | 'error';

Solution

1. Step 1: Recall type alias syntax

   Type aliases use the keyword type followed by the name, equals sign, and the type expression.

2. Step 2: Identify union type declaration

   The union of string literals is written as 'success' | 'error' after the equals sign.

3. Final Answer:

   type Status = 'success' | 'error'; -> Option D

4. Quick Check:

   Type alias syntax = type Name = TypeExpression [OK]

Hint: Use 'type' keyword with '=' for aliases [OK]

Common Mistakes:

• Using 'interface' for union types
• Using ':' instead of '=' in type alias
• Mixing interface and type alias syntax

3. Given the following code, what will be the output of console.log(user1.age);?

interface User {
  name: string;
}

interface User {
  age: number;
}

const user1: User = { name: 'Alice', age: 30 };

medium

A. 30

B. undefined

C. TypeScript error: Duplicate identifier 'User'

D. Runtime error

Solution

1. Step 1: Understand interface merging

   TypeScript merges multiple interface declarations with the same name into one combined interface.

2. Step 2: Check the combined interface properties

   The merged User interface has both name and age properties, so user1 can have both.

3. Final Answer:

   30 -> Option A

4. Quick Check:

   Interface merging allows combined properties [OK]

Hint: Interfaces with same name merge properties [OK]

Common Mistakes:

• Expecting a duplicate identifier error
• Thinking type aliases merge
• Assuming age is undefined

4. Identify the error in the following code and choose the correct fix:

type Person = {
  name: string;
};

type Person = {
  age: number;
};

medium

A. Use union type instead of redeclaration.

B. Change both to interfaces to allow merging.

C. Type aliases cannot be redeclared; rename one alias.

D. No error; code is valid.

Solution

1. Step 1: Understand redeclaration rules for type aliases

   Type aliases cannot be declared multiple times with the same name; this causes a duplicate identifier error.

2. Step 2: Identify the fix

   Renaming one of the type aliases avoids the conflict; interfaces can merge but type aliases cannot.

3. Final Answer:

   Type aliases cannot be redeclared; rename one alias. -> Option C

4. Quick Check:

   Type aliases = no redeclaration [OK]

Hint: Type aliases cannot be declared twice with same name [OK]

Common Mistakes:

• Assuming type aliases merge like interfaces
• Ignoring duplicate identifier error
• Trying to redeclare type alias without rename

5. You want to create a reusable type that can represent either a user object with name and age or a string ID. Which is the best approach?

hard

A. Use an interface for the user object and a separate type alias for the union with string.

B. Use a type alias with a union of the user object type and string.

C. Use an interface with a union inside it.

D. Use two interfaces and merge them.

Solution

1. Step 1: Identify the need for union types

   You want a type that can be either an object or a string, which requires a union type.

2. Step 2: Choose the best syntax for union types

   Type aliases can represent unions directly, while interfaces cannot represent unions themselves.

3. Final Answer:

   Use a type alias with a union of the user object type and string. -> Option B

4. Quick Check:

   Type aliases = best for unions [OK]

Hint: Use type alias for unions including objects and primitives [OK]

Common Mistakes:

• Trying to use interface for union types
• Merging interfaces to represent unions
• Separating types unnecessarily