TypeScript Type vs. Interface: Choosing the Right Approach

Understanding When to Utilize ‘type’ and When to Opt for ‘interface’ in TypeScript Development

Photo by Ben White on Unsplash

In TypeScript we have two ways to define the shape of an object. In most cases they do the same things.

Intefraces shines when used for objects and type shines when used with primitve values.

However this difference isn’t enough to decide which one you should use and which one not, the line is very thin. Let’s see few areas where types wins and few areas where interfaces wins.

By the end of this article you’ll be able to decide which one should you use.

types can be of union type but interfaces can’t

by union, it means the type can be one from all available options.

type Hobbies = string | [strings] | number;

const hobbies:Hobbies  = "read";


// type : 1
// interface: 0

types blends well with utility types, for interfaces they also can, but with ugly syntax

type UserProps = {
   name: string;
   age: number;
   createdAt: Date
}

type Guest = Omit<UserProps, "name", "age">

interface UserProps {
   name: string;
   age: number;
   createdAt: Date
}

interface GuestProps extends Omit<UserProps, "name" | "age">{}

// type : 2
// interface: 0

types can describe functions , so do interfaces but with ugly syntax

type TFnType = (url:string, date:Date) => string

interface IFnType {
  (url:string, date:Date) => string
}

// type : 3
// interface: 0

types works well with tuples so do interfaces, but with ugly syntax

type TScore = [number, string];

const score:TScore = [400, 'level2'];

interface Score extends Array<number | string> {
 0: number;
 1: string;
}
const score:IScore = [400, 'level2'];


// type : 4
// interface: 0

extracting type from something else is easy using types

const project = {
  title: "XZ",
  team: {
     name: 'HH'
   }
}

type Specification = typeof project;

type team = typeof project["team"];

// type : 5
// interface: 0

interfaces are open, while types are closed

We can define two interfaces with same name, and TypeScript will merge those into one. But this isn’t true for types . we’ll get error if we declare two types with same name

interface User{
  name: string;
}

interface User{
  age: string;
}


// type : 5
// interface: 1

types works well with Classes, and so do interfaces

interface IUser {};

type TUser = {};

class Test implements IUser {}

class Test implements TUser {}


// type : 5
// interface: 1

interfaces has better error description, while types error are verbose

Demo:
https://www.typescriptlang.org/play?#

// type : 5
// interface: 2

interfaces can be extended, so do types but with ugly syntax

interface a {
}

interface b exteds a {

}



type user2 {
}

type user3 = user2 & {
}



// Note that interfaces can't extend a type which is of union type.
type T1 = string | number;

interface c extends T1; // throw error

// type : 5
// interface: 3

Conclusion:

types uses equalto= syntax which is more convenient way that lines up with daily javascript works, and also there exists type in TypeScript just kidding.
and interface seems familiar if you are coming from object oriented background.
None of them can’t replace each other completly. It’s the use case where they shines.
When I am working with primitives , and wanted to have union types I go with types. But if my shape contains complex objects then I go with interfaces .

From TypeScript: for publicly exposed types, it’s a better call to make them an interface.

Now based on the use cases you choose either types or interface .