Typescript: Interface

#typescript #webdev #beginners #tutorial

In this article, you'll learn about what interface are and how to use them, along with the difference between type and interface. This article gives you a basic understanding of the interface.

This is going to be a full series of typescript where you will learn from basic topics like string, boolean to more complex like Type Aliases, enums, Interface, generics, and etc.

Interface
Interface vs Type

Interface

An interface declaration is another way to name an object type. You can create it by using the interface keyword:

interface User {
    name: string,
    age: number,
}

// ✅ CORRECT
let newUser : User = {name: "John", age: 28};
// ❌ ERROR: property 'age' is missing
let newUser : User = {name: "John"};
// ❌ ERROR: missing the following properties from type 'User': name, age 
let newUser : User = {};

You can also use readonly and optional approach in interface:

interface User {
    readonly id: number     // readonly variable
    name: string,
    age: number,
    specialKey? : string,   // optional 
}

You can also pass functions to the interface, there are two ways to do that:

// Method-1
interface User {
    getDiscount(coupon: string): number     
}

// For Both you need to call this like this:
const newUser: User = {
    getDiscount: (coupon: "KIJ298DD9J") => {
        return 10;
    }
}

// Method-2
interface User {
    getDiscount: (coupon: string) => number
}

// 👉 You see I have changed the 'coupon' to 'couponName'
// You don't need to match the name of the parameter here
// It will take care of it
const newUser: User = {
    getDiscount: (couponName: "KIJ298DD9J") => {
        return 10;
    }
}

In Method 1 you can simply use the () to say it functions like: getDiscount(): number and string are the return types, and it takes no arguments.

In Method 2 we use an arrow function like getDiscount: () => number.

Interface vs Type

Type aliases and interfaces are very similar, and in many cases, you can choose between them freely. Almost all features of an interface are available in type The key distinction is that a type cannot be reopened to add new properties vs. an interface that is always extendable.

Let’s Differentiate them with a few examples:

Adding new fields

In interface you can add new fields to the existing interface, but you cannot add new fields to an existing type. It will throw an error.

Interface

interface User {
    id: string;    
    email: string;
}

interface User {
    name: string;
}

// Now you can add all the three values to the User interface
const user: User = {
    id: "2323232",
    email: "foo@email.com",
    name: "Foo";
}

Type

type User = {
    id: string;
}

type User = {
    email: string;
}

// ❌ ERROR: Duplicate identifier "User"

In interface you can add new fields and change them however you want, but in type you can't do that. Once a type is created, it can't be changed.

Extends

To extend the already defined interface or type both have a different approach. interface uses extends keyword, while type uses intersection.

interface

interface Car {
    model: string;
    color: string;
}

// 👇 You can extend an interface using 'extends' keywords
interface Tesla extends Car {
  autoPilotModelName: string;
};

// ✅ Use Case
const newCar: Tesla = {
    model: "S",
    color: "red",
    autoPilotModelName: "xyz"
}

type

type Car = {
    model: string;
    color: string;
}
// 👇 In type you need to use Intersection
type Tesla = Car & {
  autoPilotModelName: string;
};

const newCar: Tesla = {
    model: "S",
    color: "red",
    autoPilotModelName: "xyz"
}

Union

In interface you cannot create a union type, but you can do that if you are using type. Let's take an example:

interface

interface User  {
    email: string;
}

interface Admin  {
    email: string;
    adminKey: string;
}

// ❌ ERROR: '{' expected.
interface Person = User | Admin;

// ✅ CORRECT: you can create union type like this
type Person = User | Admin;

// ✅ CORRECT: However you can use union type inside the interface
interface Person {
    person: User | Admin;
}

type

type User = {
    email: string;
}

type Admin = {
    email: string;
    adminKey: string;
}

// ✅ You can do that.
type Person = User | Admin;

In the above example, you might have noticed that when I tried to assign a union type to the interface (interface Person = User | Admin), it threw an error. It's because you cannot assign anything to interface. Its deceleration syntax is similar to class. But both have different working styles.

class MyClass {}

interface Hello {}

Wrapping up

In this article, I have explained what interface is and how to use it, along with the difference between type and interface. This article gives you a basic understanding of the interface.

This is a series of Typescript lessons that will help you learn Typescript from scratch. If you enjoyed this article, then don't forget to give ❤️ and bookmark 🏷️for later use and if you have any questions or feedback then don't hesitate to drop them in the comments below. I'll see you in the next one.

Connect with me