Interfaces

Understand how to declare object types with the "interface" keyword, and the subtle difference interfaces have with regular type aliases.

---

In the Using types - II lesson, you learned about object types and how to create them. Let's create a new custom object type using the type keyword that we're already familiar with.

type Person = {
    name: string;
    age: number;
    hobbies: string[];
};

We can keep this just as it is, which would be totally okay, or we could use an interface. Interfaces and type aliases are nearly identical in their functionality; however there are two main differences:

1. Interfaces can ONLY hold function or object types.
2. Types can only be declared once, while interfaces of the same name can be declared multiple times and will automatically merge.
3. The syntax between the two differs slightly.

When working with object types, it usually just comes down to preference whether you decide to use an interface or a type alias.

Using the interface keyword, we can turn our Person type into an interface.

// Interfaces don't need an "=" sign
interface Person {
    name: string;
    age: number;
    hobbies: string[];
}

When creating a new interface, you can also use the extends keyword to inherit all of the object properties from another interface (or type alias):

interface Person {
    name: string;
    age: number;
    hobbies: string[];
}

// This would also work just fine if "Person"
// was declared with the "type" keyword instead
interface Employee extends Person {
    occupation: string;
}

This is functionality is not unique to interfaces though, as it can be done with something called an intersection type when using the type keyword.

type Employee = Person & {
    occupation: string;
};

Overall, the differences between interfaces and type aliases are quite subtle. In some use cases, one might be better than the other, but in general it's up to you which you want to use.

To learn more about the differences between interface and type, check out this article.

Next up

It's finally time to build our project! The project we'll be building in the next lesson will be a small API scraper utilizes many of the TypeScript features learned in the course.