EasyType System📖 Theory Question

What is the difference between type and interface in TypeScript?

💡

Hint

interface is extendable and mergeable; type is more powerful (unions, tuples, mapped types) but not mergeable

Full Answer

Both define object shapes, but they have different capabilities:

Interface — designed for object/class shapes, supports declaration merging:

interface User {
  id: number;
  name: string;
}

// Extending interfaces
interface Admin extends User {
  adminLevel: number;
}

// Declaration merging — useful for augmenting library types
interface Window {
  myCustomProp: string; // adds to existing Window interface
}

// Implementing in a class
class ConcreteUser implements User {
  constructor(public id: number, public name: string) {}
}

Type alias — more powerful, works with any type including primitives, unions, tuples, and mapped types:

// Primitive alias
type ID = string | number;

// Union — interfaces can't do this
type Status = 'active' | 'inactive' | 'pending';

// Tuple
type Pair = [string, number];

// Mapped type — only type aliases can do this directly
type Readonly<T> = { readonly [K in keyof T]: T[K] };

// Conditional type
type NonNullable<T> = T extends null | undefined ? never : T;

Practical guidance:

  • Use interface for public API shapes that consumers may want to extend
  • Use type for unions, computed types, tuples, and function signatures
  • Be consistent within a codebase — consistency matters more than which one you pick
💡 The React team recommends interface for component props and type for everything else. Both work for most cases — pick a style and stick to it.

More Type System Questions

EasyWhat is type inference in TypeScript and when does it kick in?→EasyWhat is the difference between any, unknown, and never in TypeScript?→EasyWhat are type assertions and when should you use them?→EasyWhat is structural typing (duck typing) in TypeScript?→

Practice this in a timed sprint →

5 free questions, no signup required

⚡ Start Sprint