Overview

In TypeScript, understanding the differences between interfaces and types is crucial for designing robust type systems and APIs. While both can be used to describe the shape of objects or function signatures, their capabilities, and the situations where one is preferable over the other, vary significantly. Mastering their differences and use cases is a key skill in TypeScript development.

Key Concepts

1. Extensibility: How interfaces and types support extension and composition.
2. Capabilities: The unique features and limitations of interfaces and types.
3. Use Cases: Practical scenarios where one might be chosen over the other based on specific requirements.

Common Interview Questions

Basic Level

1. What is the difference between an interface and a type in TypeScript?
2. How do you declare a simple object structure using both an interface and a type?

Intermediate Level

3. How can interfaces and types be extended or combined?

Advanced Level

4. Discuss the limitations of interfaces and types, especially concerning union and intersection types.

Detailed Answers

1. What is the difference between an interface and a type in TypeScript?

Answer:
In TypeScript, both interface and type can be used to name and define the shape of objects. The key differences lie in their capabilities and how they are extended. Interfaces are primarily focused on defining the shapes of objects and are always extendable, making them ideal for object-oriented patterns. Types, on the other hand, are more versatile, allowing for the representation of unions, intersections, primitives, and more. However, types can't be reopened to add new properties, unlike interfaces.

Key Points:
- Interfaces are extendable and can be merged.
- Types are more versatile but are fixed once declared.
- Interfaces are better suited for object-oriented design, while types offer more flexibility.

Example:

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

// Extending an interface
interface IAdmin extends IUser {
    adminLevel: string;
}

type User = {
    name: string;
    age: number;
};

// Creating a union type
type UserOrString = User | string;

2. How do you declare a simple object structure using both an interface and a type?

Answer:
To declare a simple object structure, you can use either an interface or a type in TypeScript. Both can effectively describe the shape of an object, including the types of its properties.

Key Points:
- Use interface for a clear, extendable object definition.
- Use type for flexibility, including the ability to define unions and intersections.

Example:

// Using an interface
interface IPerson {
    firstName: string;
    lastName: string;
}

// Using a type
type Person = {
    firstName: string;
    lastName: string;
};

3. How can interfaces and types be extended or combined?

Answer:
Interfaces can be extended using the extends keyword, allowing for a clear hierarchical structure. Types can be combined using intersections (&) to create new types that merge the properties of existing types. While you cannot "extend" a type in the same way as an interface, you can create new types that adopt and combine existing ones.

Key Points:
- Interfaces are extended using extends.
- Types are combined using intersections (&).

Example:

// Extending an interface
interface IBase {
    baseProp: string;
}
interface IDerived extends IBase {
    derivedProp: number;
}

// Combining types
type Base = {
    baseProp: string;
};
type Derived = Base & {
    derivedProp: number;
};

4. Discuss the limitations of interfaces and types, especially concerning union and intersection types.

Answer:
Interfaces are limited in that they cannot represent union or intersection types, making them less flexible for certain patterns where a value might have multiple shapes. Types, while versatile in representing unions, intersections, and more, cannot be reopened to add new properties once declared, and they might lead to more complex constructs when trying to model extensive object hierarchies.

Key Points:
- Interfaces cannot represent unions or intersections.
- Types are fixed upon declaration and not extendable.
- Types provide greater versatility but can lead to complexity.

Example:

// Union types with `type`
type Shape = Circle | Square;

interface Circle {
    kind: "circle";
    radius: number;
}

interface Square {
    kind: "square";
    sideLength: number;
}

// This pattern can't be directly replicated with interfaces alone.

This guide covers the foundational differences and use cases for interfaces and types in TypeScript, providing a solid basis for understanding when to use each in your projects.