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