How TypeScript Interfaces Work – Explained with Examples

TypeScript is a superset of JavaScript that adds static type checking and other features to the language. TypeScript helps developers to write more reliable and maintainable code, and catch errors and bugs before they cause problems at runtime. One of the key concepts in TypeScript is interfaces, which are used to describe the shape and structure of objects, functions, classes, and other types. In this blog post, I will explain how TypeScript interfaces work, and how you can use them to improve your code quality and readability.

What are TypeScript Interfaces?

Interfaces are a way of defining contracts or specifications for the types in your code. They describe the properties and methods that a type should have, and the types of those properties and methods. Interfaces can also be used to define custom types that are composed of other types, such as unions, intersections, and generics. Interfaces are not actual values or objects, but rather abstract descriptions that are only used by the TypeScript compiler for type checking and inference.

How to Declare and Use TypeScript Interfaces?

To declare an interface in TypeScript, you use the interface keyword, followed by the name of the interface, and a set of curly braces that contain the interface members. For example, here is how you can declare an interface named Person that represents a person object:

interface Person {
  name: string; // a property of type string
  age: number; // a property of type number
  greet(): void; // a method that returns nothing
}

To use an interface in TypeScript, you can use the : operator to assign the interface as a type annotation to a variable, a parameter, a function, a class, or any other type. For example, here is how you can use the Person interface as a type annotation for a variable named person:

let person: Person = {
  name: "Alice",
  age: 25,
  greet() {
    console.log("Hello, I'm " + this.name);
  }
};

The TypeScript compiler will check that the person variable conforms to the Person interface, and report any errors or inconsistencies. For example, if you try to assign a value that does not have all the required properties or methods, or has properties or methods of the wrong type, the compiler will complain. For example, this will cause an error:

let person: Person = {
  name: "Bob",
  age: "30", // error: type 'string' is not assignable to type 'number'
  sayHi() { // error: property 'sayHi' is not assignable to property 'greet'
    console.log("Hi, I'm " + this.name);
  }
};

How to Extend and Implement TypeScript Interfaces?

One of the benefits of interfaces is that they can be extended and implemented by other interfaces and classes, which allows you to create more complex and reusable types. To extend an interface, you use the extends keyword, followed by the name of the interface that you want to inherit from. For example, here is how you can extend the Person interface to create a Student interface that has an additional property named course:

interface Student extends Person {
  course: string; // a property of type string
}

The Student interface will inherit all the properties and methods from the Person interface, and add its own property. You can then use the Student interface as a type annotation for a variable, a parameter, a function, a class, or any other type. For example, here is how you can use the Student interface as a type annotation for a variable named student:

let student: Student = {
  name: "Charlie",
  age: 20,
  course: "Computer Science",
  greet() {
    console.log("Hello, I'm " + this.name + " and I study " + this.course);
  }
};

To implement an interface, you use the implements keyword, followed by the name of the interface that you want to implement. This is usually done by classes, which can implement one or more interfaces to define their structure and behavior. For example, here is how you can implement the Person interface by a class named Teacher:

class Teacher implements Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log("Hello, I'm " + this.name + " and I teach " + this.subject);
  }
}

The Teacher class will have to provide all the properties and methods that are required by the Person interface, and can also add its own properties and methods. You can then use the Teacher class as a type annotation for a variable, a parameter, a function, a class, or any other type. For example, here is how you can use the Teacher class as a type annotation for a variable named teacher:

let teacher: Teacher = new Teacher("David", 30);
teacher.greet(); // Hello, I'm David and I teach Math

Conclusion

In this blog post, I explained how TypeScript interfaces work, and how you can use them to describe the shape and structure of objects, functions, classes, and other types. Interfaces are a powerful feature of TypeScript that can help you to write more reliable and maintainable code, and catch errors and bugs before they cause problems at runtime. I hope you found this post useful and informative. Happy coding! 😊.