When to Use Type or Interface With TypeScript

Jesse Langford
3 min readJan 31, 2023
By paulaphoto

In this article, I’ll be going over the differences between type and interface declarations in TypeScript. This is a question I often get asked at work and I thought it would be a good idea to make it into an article to share.

Types

When referring to a Type created with the type keyword, what we are really referring to are Type Aliases. Type is often used to describe Type Aliases because the keyword used to define them is type.

type Dog = {
breed: string
name: string
age: number
}

type ShirtSize = "small" | "medium" | "large"

A Type Aliases is a name given to a Type. Giving a name to a Type allows you to share it across your application easily.

Interface

Interfaces or Interface Declarations are another way to reference a Type.

interface Dog {
breed: string
name: string
age: number
}

Key Differences

Type Aliases and Interface Declarations are similar in their behavior. The main distinction is Interface Declarations can be added to after their declaration, while Type Declarations cannot.

interface Dog {
name: string
age: number
}

interface Dog {
height: string
}

const dog: Dog = {
name: "fido",
age: 2,
height: "2 feet 2 inces"
}

The above example is valid TypeScript.

type Dog = {
name: string
age: number
}

type Dog = {
height: string
}

The same example with Type Aliases gives the error: Duplicate identifier 'Dog'

Interface Declarations and Type Aliases also differ when it comes to combining similar types. Interface declarations use the extends keyword while Type Aliases use & .

// Interface Declaration

interface Animal {
genus: string
family: string
}

interface Dog extends Animal {
name: string
}

// Type Alias

type Animal = {
genus: string
family: string
}

type Dog = Animal & {
name: string
}

In the example above, both instances of the Dog type include the fields defined in the Animal type.

How do I use them

--

--