Type vs Interface in TypeScript

One of the most common questions in TypeScript interviews is about the differences between type and interface. While they can often be used interchangeably, there are important distinctions to understand.

Basic Syntax

Interface

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

interface User {
  email: string; // Declaration merging
}

Type

type User = {
  name: string;
  age: number;
}

// Cannot redeclare - will cause error
type User = {
  email: string;
}

Key Differences

1. Declaration Merging

Interface supports declaration merging:

interface Window {
  title: string;
}

interface Window {
  ts: TypeScriptAPI;
}

// Result: Window has both title and ts properties

Type does not support declaration merging:

type Window = {
  title: string;
}

type Window = {
  ts: TypeScriptAPI;
}
// Error: Duplicate identifier 'Window'

2. Extensibility

Interface uses extends:

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

Type uses intersection (&):

type Animal = {
  name: string;
}

type Dog = Animal & {
  breed: string;
}

3. Computed Properties

Type supports computed properties:

type Keys = 'name' | 'age';

type User = {
  [K in Keys]: string;
}
// Result: { name: string; age: string; }

Interface does not support computed properties directly.

4. Union Types

Type can represent unions:

type Status = 'loading' | 'success' | 'error';

Interface cannot represent unions directly.

5. Conditional Types

Type supports conditional types:

type ApiResponse<T> = T extends string ? string : number;

Interface does not support conditional types.

When to Use What?

Use Interface When:

• Defining object shapes that might be extended
• Working with classes (implements)
• Need declaration merging
• Creating public APIs

interface DatabaseConfig {
  host: string;
  port: number;
}

interface DatabaseConfig {
  ssl: boolean; // Merged with above
}

class MySQLDatabase implements DatabaseConfig {
  host = 'localhost';
  port = 3306;
  ssl = false;
}

Use Type When:

• Creating union types
• Using computed properties
• Working with conditional types
• Creating complex type transformations

type Theme = 'light' | 'dark';
type ComponentProps<T> = T extends 'button' ? ButtonProps : DivProps;
type Keys = keyof User;

Performance Considerations

• Interface is generally faster for TypeScript compiler
• Type can be slower for complex conditional types
• For simple object shapes, performance difference is negligible

Best Practices

1. Consistency: Choose one approach for your project and stick with it
2. Public APIs: Use interfaces for public APIs that might be extended
3. Internal Types: Use types for internal type transformations
4. Documentation: Document your choice in your team's style guide

Common Interview Questions

• What's the difference between type and interface?
• When would you use interface over type?
• Can you merge types like you can with interfaces?
• What are the performance implications of each?

Conclusion

Both type and interface are powerful tools in TypeScript. The choice often comes down to:

• Interface: Better for object shapes, extensibility, and public APIs
• Type: Better for unions, computed properties, and complex type logic

Understanding these differences will help you write more maintainable TypeScript code and ace your interviews!