Type Aliases and Interfaces

Welcome to the next lesson! In this lesson, you’ll learn about type aliases and interfaces in TypeScript, including their differences, similarities, and when to use each. Let’s get started!

What Are Type Aliases?

A type alias allows you to define a custom name for a type. It can represent primitive types, objects, or even function signatures.

Example:

Task: Create a type alias for an object representing a book and use it to define a variable.

type Point = {
  x: number;
  y: number;
};

let point: Point = { x: 10, y: 20 };
console.log(point); 
// Output: { x: 10, y: 20 }

What Are Interfaces?

An interface defines the structure of an object, including its properties and methods. It’s often used to enforce consistency and type safety for objects.

Example:

Task: Create an interface for a user profile and use it to define a variable.

interface Point {
  x: number;
  y: number;
}

let point: Point = { x: 5, y: 15 };
console.log(point); 
// Output: { x: 5, y: 15 }

Type Aliases vs Interfaces: Similarities

Type aliases and interfaces share some features:

• Both can describe the shape of an object.
• Both can be used to define function types.
• Both support extending other types.

Example: A function type:

Task: Define both a type alias and an interface for a function and use them.

type Add = (a: number, b: number) => number;
interface Subtract {
  (a: number, b: number): number;
}

let add: Add = (x, y) => x + y;
let subtract: Subtract = (x, y) => x - y;

console.log(add(5, 3)); 
// Output: 8
console.log(subtract(5, 3)); 
// Output: 2

Type Aliases vs Interfaces: Differences

Here are the key differences:

• Interfaces: Can be merged (declaration merging).
• Type Aliases: Cannot be merged.
• Type Aliases: Can define union and intersection types.
• Interfaces: Are primarily designed for object shapes.

Example: Union types with type aliases:

Task: Use a type alias to define a union type and assign different values to a variable.

type StringOrNumber = string | number;

let value: StringOrNumber = "Hello";
value = 42;
// value = true; 
// Error: Type 'true' is not assignable to type 'StringOrNumber'.

Extending Types and Interfaces

Both type aliases and interfaces can extend other types:

• Interfaces: Use the extends keyword.
• Type Aliases: Use intersections (&).

Example:

Task: Extend a type alias and an interface to create new types.

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

type Bird = Animal & { canFly: boolean };

let myDog: Dog = { name: "Buddy", breed: "Golden Retriever" };
let myBird: Bird = { name: "Parrot", canFly: true };

console.log(myDog, myBird);

Declaration Merging

Interfaces support declaration merging, where multiple interface declarations with the same name are merged into one. Type aliases do not support this feature.

Example:

Task: Create two interface declarations with the same name and test declaration merging.

interface Person {
  name: string;
}

interface Person {
  age: number;
}

let person: Person = { name: "Alice", age: 30 };
console.log(person); 
// Output: { name: "Alice", age: 30 }

When to Use Each

Here are some guidelines:

• Use interfaces for defining object shapes and when declaration merging is needed.
• Use type aliases for unions, intersections, or when defining function types.

Tip: Use the one that best fits your use case for clarity and consistency!

Great Job!

Congratulations! You’ve learned the similarities and differences between type aliases and interfaces in TypeScript, as well as when to use each. In the next lesson, we’ll explore advanced TypeScript features like conditional types. Let’s keep coding!