Type vs Interface in TypeScript

Type vs Interface in TypeScript

Both type and interface are used to define custom types in TypeScript, but they have some key differences:

Similarities

• Both can describe object shapes
• Both can be extended
• Both can be implemented by classes

Key Differences

1. Syntax

// Interface
interface Person {
  name: string;
  age: number;
}

// Type alias
type Person = {
  name: string;
  age: number;
};

2. Extending/Combining

// Interface extends
interface Animal {
  name: string;
}
interface Bear extends Animal {
  honey: boolean;
}

// Type intersection
type Animal = {
  name: string;
}
type Bear = Animal & { 
  honey: boolean 
}

3. Declaration Merging (only for interfaces)

interface Window {
  title: string;
}
interface Window {
  ts: TypeScriptAPI;
}
// These merge into single Window interface

// Type aliases can't be changed after creation
type Window = {
  title: string;
}
type Window = {  // Error: Duplicate identifier
  ts: TypeScriptAPI;
}

4. Capabilities

Type aliases can:

• Define primitive types: type Name = string
• Define tuple types: type Data = [number, string]
• Define union types: type ID = string | number
• Use mapped types: type Nullable<T> = { [K in keyof T]: T[K] | null }

Interfaces are generally better for:

• Object shapes
• Declaration merging
• Extending other interfaces

When to Use Which?

Use interfaces when:

• You need declaration merging
• Working with object-oriented patterns
• Defining public API contracts

Use type aliases when:

• You need unions, tuples, or mapped types
• Defining complex type transformations
• Need to name primitive types

In practice, for simple object shapes, the choice often comes down to personal/team preference. Many codebases use interfaces by default unless they need type alias features.