In TypeScript, you might have noticed that you can declare custom types in two different ways. One is with the keyword, and the other is with the keyword. As such, you may find yourself wondering why there are two ways to do one thing - and you're not alone. I already covered how to use interfaces and - but let's look a little bit more into how they differ. interface type types 1. Interfaces extend syntax is different to types If we define a type in TypeScript, it is not extendable after the fact. For example, consider this custom type I just made up: type user = {
    name: string,
    age: number
} If, after its been defined, I suddenly realise I want to add an address too, I can do this using the following syntax: type userWithAddress = user & {
    address: string
} With interfaces, we can do the same, but the syntax remains slightly different: interface user {
    name: string;
    age: number;
}
interface userWithAddress extends user {
    address: string
} Now contains all the properties of , plus one additional property - that being . userWithAddress user address between these two ways of extending types is how they handle conflicts. For example, if you extend an interface and mention a property that has already been defined, an error will be thrown. For example, : The only difference this will not work interface user {
    name: string;
}
interface newUser extends user {
    name: number;
} Meanwhile, with , you can do this: type type user = {
    name: string
}

type newUser = user & {
    name: number
} While this will not throw an error, it may result in some unexpected results - so you should avoid it where necessary. For example, above, the property is reduced to type - since a type can be both and at the same time. :) name never never string number 2. Interfaces can be merged - types cannot Along the same lines, cannot be merged, while can if you declare them multiple times. For example, if we have a type, we can't do something like this: types interfaces type cat = {
    name: string
}
type cat = {
    color: string
} In fact, . Meanwhile, with , we can do that - and it'll merge both declarations. So the example below will create a type called with both and properties: the above code will throw an error interface cat name color interface cat {
    name: string;
}
interface cat {
    color: string;
} 3. Interfaces cannot extend a primitive While we can create a type that can be an alias for a primitive type like , cannot do this. For example, if you want to create a type called , which is always of type string, we can do it like this: string interface myName type myName = string; Here, becomes an alias for - so we can write instead of , essentially, anywhere. Meanwhile, does not have this ability. The following cannot and will not work: myName string myName string interface interface myName extends string {
    
} 4. Types can create unions, while interfaces cannot We can create union types with the keyword, but we can't do that with an interface. For example, here, can be a or : type userId string number type userId = string | number Meanwhile, the above cannot be achieved with an , since the interface defines the shape or type of an object. interface 5. Classes can implement interfaces, but not types If you are using classes in your TypeScript code, they can implement interfaces, but not types. That means the class has to conform to the interface itself. If you define a , you cannot use it with a class. For example: type interface user {
    name: string;
    age: number;
}

class createUser implements user {
  name = "John";
  age = 143;
} This makes quite handy if you decide to use classes in your TypeScript code - but as we know, a lot of TypeScript code tends to be functional rather than code based. So this benefit will depend on your codebase. interface Conclusion As you can see, the main differences between and kind of depend on the circumstances you use them in. Almost all the features of are available in , which means you might find yourself more frequently going to . Typically, though, it tends to be based on preference or what works best in your codebase (i.e., using the additional feature of ). type interface interface type type implement interface In any case, rest assured that it isn't as confusing as you might first think - with both and effectively being two ways to do the same thing! interface type Also published here.

2022 - HackerNoon Contributor of the Year - Coding

2022 - HackerNoon Contributor of the Year - Coding Skills

2022 - HackerNoon Contributor of the Year - Java

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Website Development

2022 - Tip Your Hat Tutorials Best Tutorials

Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Coding

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - Tip Your Hat Tutorials Best Tutorials

Nominated for 2022 - HackerNoon Contributor of the Year - Java

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

TypeScript Interfaces and Types: A Comparison

TypeScript Interfaces and Types: A Comparison

Too Long; Didn't Read

Johnny Simpson

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

TypeScript Interfaces and Types: A Comparison

Too Long; Didn't Read

Johnny Simpson

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES