Interface vs type alias decision in Typescript - Practice Questions

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of extending interfaces vs type aliases

What is the output of this TypeScript code when compiled and run in a JavaScript environment?

Typescript

interface A {
  x: number;
}

type B = {
  y: string;
}

interface C extends A {
  z: boolean;
}

type D = B & {
  z: boolean;
}

const objC: C = { x: 10, z: true };
const objD: D = { y: "hello", z: false };

console.log(objC.x, objC.z);
console.log(objD.y, objD.z);

A 10 true\nhello false

B 10 true\nundefined false

C 10 undefined\nhello false

D undefined true\nhello false

💡 Hint

Interfaces can extend other interfaces, and type aliases can use intersection types (&) to combine types.

Interface C extends A, so objC has properties x and z. Type alias D combines B and an object with z, so objD has y and z. The console.log prints the values of these properties correctly.

🧠 Conceptual

intermediate

Choosing between interface and type alias for object shapes

Which statement best describes when to prefer an interface over a type alias for defining object shapes in TypeScript?

A Use an interface when you need to extend or implement it later; use a type alias for unions or primitives.

B Use a type alias only for classes; interfaces are for functions.

C Use a type alias when you want to extend it; interfaces cannot be extended.

D Use interfaces only for primitive types; type aliases only for objects.

💡 Hint

Think about how interfaces and type aliases behave with extension and implementation.

Interfaces are designed to be extended and implemented, making them ideal for object shapes that may grow. Type aliases are more flexible for unions, primitives, and complex types but cannot be implemented or reopened.

🔧 Debug

advanced

Why does this type alias cause an error?

This TypeScript code causes an error. What is the reason?

Typescript

type Person = {
  name: string;
}

type Person = {
  age: number;
};

A Type aliases must always be declared with the keyword 'interface'.

B Type aliases cannot contain more than one property.

C Type aliases cannot be redeclared with the same name; this causes a duplicate identifier error.

D The second type alias must use 'extends' keyword to add properties.

💡 Hint

Consider how TypeScript treats multiple declarations of the same type alias name.

Unlike interfaces, type aliases cannot be reopened or redeclared with the same name. This code tries to declare 'Person' twice, causing a duplicate identifier error.

❓ Predict Output

advanced

Output of intersection types vs interface merging

What is the output of this TypeScript code when compiled and run?

Typescript

interface X {
  a: number;
}

interface X {
  b: string;
}

type Y = { a: number } & { b: string };

const objX: X = { a: 5, b: "hello" };
const objY: Y = { a: 5, b: "hello" };

console.log(objX.b);
console.log(objY.b);

A hello\nundefined

B 5\nhello

C undefined\nhello

D hello\nhello

💡 Hint

Interfaces with the same name merge their properties automatically.

Interfaces with the same name merge, so interface X has both a and b. The intersection type Y combines two object types with a and b. Both objX and objY have property b with value 'hello'.

🧠 Conceptual

expert

When does a type alias support features interfaces do not?

Which of the following features can a type alias support but an interface cannot in TypeScript?

A Extending multiple interfaces

B Union and intersection types

C Declaration merging

D Implementing by classes

💡 Hint

Think about the flexibility of type aliases with complex types.

Type aliases can represent union and intersection types, which interfaces cannot. Interfaces support declaration merging and can be implemented by classes, but cannot represent unions.

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