Interfaces vs Types in TypeScript

by

2019 Update

The current answers and the official documentation are outdated. And for those new to TypeScript, the terminology used isn’t clear without examples. Below is a list of up-to-date differences.

1. Objects / Functions

Both can be used to describe the shape of an object or a function signature. But the syntax differs.

Interface

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

interface SetPoint {
  (x: number, y: number): void;
}

Type alias

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

type SetPoint = (x: number, y: number) => void;

2. Other Types

Unlike an interface, the type alias can also be used for other types such as primitives, unions, and tuples.

// primitive
type Name = string;

// object
type PartialPointX = { x: number; };
type PartialPointY = { y: number; };

// union
type PartialPoint = PartialPointX | PartialPointY;

// tuple
type Data = [number, string];

3. Extend

Both can be extended, but again, the syntax differs. Additionally, note that an interface and type alias are not mutually exclusive. An interface can extend a type alias, and vice versa.

Interface extends interface

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

Type alias extends type alias

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

Interface extends type alias

type PartialPointX = { x: number; };
interface Point extends PartialPointX { y: number; }

Type alias extends interface

interface PartialPointX { x: number; }
type Point = PartialPointX & { y: number; };

4. Implements

A class can implement an interface or type alias, both in the same exact way. Note however that a class and interface are considered static blueprints. Therefore, they can not implement / extend a type alias that names a union type.

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

class SomePoint implements Point {
  x = 1;
  y = 2;
}

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

class SomePoint2 implements Point2 {
  x = 1;
  y = 2;
}

type PartialPoint = { x: number; } | { y: number; };

// FIXME: can not implement a union type
class SomePartialPoint implements PartialPoint {
  x = 1;
  y = 2;
}

5. Declaration merging

Unlike a type alias, an interface can be defined multiple times, and will be treated as a single interface (with members of all declarations being merged).

// These two declarations become:
// interface Point { x: number; y: number; }
interface Point { x: number; }
interface Point { y: number; }

const point: Point = { x: 1, y: 2 };

More Related Contents:

  1. Why does A | B allow a combination of both, and how can I prevent it?
  2. How does interfaces with construct signatures work?
  3. TypeScript Template Literal Type – how to infer numeric type?
  4. Types for function that applys name of function and arguments
  5. Is there a way to define type for array with unique items in typescript?
  6. ‘compile-time’ way to get all property names defined interface
  7. How can I augment a property within a third-party TypeScript interface defined as “any”?
  8. Property is not assignable to string index in interface [duplicate]
  9. How to assert a type of an HTMLElement in TypeScript?
  10. Typescript derive union type from tuple/array values
  11. How do I convert a string to enum in TypeScript?
  12. Typescript: deep keyof of a nested object
  13. Typescript ReferenceError: exports is not defined
  14. How do I prevent the error “Index signature of object type implicitly has an ‘any’ type” when compiling typescript with noImplicitAny flag enabled?
  15. Does Typescript support the ?. operator? (And, what’s it called?)
  16. error TS2339: Property ‘x’ does not exist on type ‘Y’
  17. Get properties of a class
  18. typescript template literal as interface key
  19. TypeScript error TS1005: ‘;’ expected (II)
  20. Difference between extending and intersecting interfaces in TypeScript?
  21. How to do runtime type casting in TypeScript?
  22. Extend interface defined in .d.ts file
  23. Circular Type References in TypeScript
  24. How can I remove a wider type from a union type without removing its subtypes in TypeScript?
  25. TypeScript keyof returning specific type
  26. Generating typescript declaration files from javascript
  27. Setting up tsconfig with spec/test folder
  28. Does TypeScript allow type aliases?
  29. How to pass an instance variable into typescript decorator arguments?
  30. Optional class members in Typescript

Leave a Comment