sr✳SHUBHAM RAJFRONTEND ENGINEER
FULL TECHNICAL GUIDEFoundation3 min read

When should you use a TypeScript type or interface?

Both can describe object shapes.

TypeScript#types#interfaces
THE ANSWER / PLAIN ENGLISH

The idea to remember.

Both can describe object shapes. Interfaces support declaration merging, while type aliases naturally express unions, tuples and mapped types; choose a consistent convention that fits the model.

From first example to real project.

Start with the smallest working idea, examine a more detailed example, then look at a real application pattern. Adapt dependencies, error handling and data models to your project.

Basic: choose a union

01 / BEGINNER

A value may be one of a fixed set of types.

TYPESCRIPT / EXAMPLE
type Status = 'idle' | 'loading' | 'success' | 'error';
let status: Status = 'idle';

Intermediate: narrow unknown input

02 / INTERMEDIATE

Do not assume an API response already satisfies your type.

TYPESCRIPT / EXAMPLE
function isUser(value: unknown): value is { id: number; name: string } {
  if (typeof value !== 'object' || value === null) return false;
  const item = value as Record<string, unknown>;
  return typeof item.id === 'number' && typeof item.name === 'string';
}

Real scenario: exhaustive state rendering

03 / REAL SCENARIO

Discriminated unions model loading, success, and failure explicitly.

TYPESCRIPT / EXAMPLE
type Result =
  | { state: 'loading' }
  | { state: 'success'; data: string[] }
  | { state: 'error'; message: string };
function label(result: Result) {
  switch (result.state) {
    case 'loading': return 'Loading';
    case 'success': return result.data.join(', ');
    case 'error': return result.message;
  }
}

Try it in your own words.

Explain when should you use a TypeScript type or interface without looking at the code. Then modify the intermediate example, describe one trade-off and identify when the real-world pattern fits.

Keep learning here.

Explore more in-depth guides, exercises and related interview questions in this library.

Browse TypeScript study guides ↗
← Back to question library

Have something
in mind?

Start a conversation