bugl
bugl
HomeLearnPatternsPathsSearch
HomeLearnPatternsPathsSearch

Loading lesson path

Learn/TypeScript/TypeScript Core
TypeScript•TypeScript Core

TypeScript Type Aliases and Interfaces

Flash cards

Review the key moves

1/4
Core idea

What is the main idea behind TypeScript Type Aliases and Interfaces?

Lesson checks

Practice each idea before moving on

Short Mimo-style checks built from this lesson's code, terms, and sequence.

1Quick choice

Which statement best captures the main point of this lesson?

2Fill blank

Complete the missing token from the example code.

___ CarYear = number
3Order

Put the learning moves in the order that makes the concept easiest to apply.

Extending Interfaces
Type vs Interface: Key Differences
TypeScript Type Aliases and Interfaces

TypeScript allows types to be defined separately from the variables that use them.

Aliases and Interfaces allows types to be easily shared between different variables/objects.

Type Aliases

Type Aliases allow defining types with a custom name (an Alias).

Type Aliases can be used for primitives like string or more complex types such as objects and arrays :

Example

type CarYear = number
type CarType = string
type CarModel = string
type Car = {
  year: CarYear, type: CarType, model: CarModel
}
const carYear: CarYear = 2001
const carType: CarType = "Toyota"
const carModel: CarModel = "Corolla"
const car: Car = {
  year: carYear, type: carType, model: carModel
};

Example: Union and Intersection Types

type Animal = { name: string };
type Bear = Animal & { honey: boolean };
const bear: Bear = { name: "Winnie", honey: true };
type Status = "success" | "error";
let response: Status = "success";

Interfaces

Interfaces are similar to type aliases, except they only apply to object types.

Example

interface Rectangle {
  height: number, width: number
}
const rectangle: Rectangle = {
  height: 20, width: 10
};

Example: Interface Merging

interface Animal { name: string; }
interface Animal { age: number; }
const dog: Animal = { name: "Fido", age: 5 };

Type vs Interface: Key Differences

  • Extending: Both can be extended, but interfaces support declaration merging.
  • Unions/Intersections: Only type aliases support union and intersection types.
  • Implements: Classes can implement either.
  • Recommendation: Use interface for objects, type for everything else.

Best Practices

  • Use interface for defining object shapes and public APIs.
  • Use type for unions, intersections, and primitives.
  • Favor composition over inheritance for types.
  • Document your types and interfaces for clarity.

Common Pitfalls

  • Using type when you need declaration merging (use interface ).
  • Overcomplicating types-keep them simple and focused.
  • Forgetting to update types/interfaces as code evolves.

Extending Interfaces

Interfaces can extend each other's definition.

Extending an interface means you are creating a new interface with the same properties as the original, plus something new.

Example

interface Rectangle {
  height: number, width: number
}
interface ColoredRectangle extends Rectangle {
  color: string
}
const coloredRectangle: ColoredRectangle = {
  height: 20, width: 10, color: "red"
};

Previous

TypeScript Enums

Next

TypeScript Union Types