TypeScript Type Aliases and Interfaces

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

Type Aliases allow defining types with a custom name (an alias), and are suitable for unions, tuples, primitive types, array types, function types, and object types.

Interfaces are similar to type aliases, except they only apply to object types and support extension and declaration merging.

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
};

Try it Yourself »

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
};

Try it Yourself »

Example: Declaration 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 only 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"
};

Try it Yourself »

❮ Previous Next ❯

★ +1