Objects and unions
TypeScript interfaces vs types: which one to use
TypeScript interfaces vs type aliases: practical differences, unions, declaration merging, and which one to pick for a consistent codebase.
Pick one and stay consistent. I use type aliases for almost everything. They cover object shapes, unions, and primitives in one syntax.
Both type and interface can describe objects. You give a name to a shape, then use it on variables and function parameters.
Describing objects
With a type alias:
type Dog = {
name: string
age: number
}
With an interface:
interface Dog {
name: string
age: number
}
You use them the same way:
const jack: Dog = {
name: 'Jack',
age: 3
}
Optional properties work with both. Add ? after the property name:
type Dog = {
name: string
age?: number
}
Interfaces can extend other interfaces:
interface Animal {
name: string
}
interface Dog extends Animal {
age: number
}
Type aliases use intersections for the same idea:
type Animal = {
name: string
}
type Dog = Animal & {
age: number
}
What only types can do
Type aliases can name primitives, unions, and intersections. Interfaces cannot.
type ID = string | number
type Status = 'idle' | 'loading' | 'done'
type Point = { x: number } & { y: number }
This is why I reach for type first. One keyword covers object shapes and these other patterns.
What only interfaces can do
Interfaces support declaration merging. If you declare the same interface twice, TypeScript merges them:
interface User {
name: string
}
interface User {
age: number
}
const jack: User = {
name: 'Jack',
age: 3
}
This is useful when a library adds types to a global object over multiple files. For your own app code, merging is usually a footgun.
My verdict
For day-to-day app code, pick type or interface and stick with it. I prefer type because it handles unions and intersections without switching syntax.
If you work on a library that augments global types, interfaces have a clear edge. Otherwise the choice matters less than consistency across your team.
New to the language? Start with our TypeScript hub. Once you know the basics, make sure your tsconfig.json has strict enabled.
Lesson completed