Interfaces in TypeScript - Learn TypeScript Interface in Depth

• Defining Interfaces
• Optional Properties
• Readonly Properties
• Extending Interfaces
• Conclusion

In TypeScript, interfaces are used to define specifications for objects, providing a way to describe the shape of an object, its properties, and their types.

Interfaces also support the concept of optional and readonly properties, and they can be extended to provide additional functionality.

Note: JavaScript doesn’t support the interfaces and TypeScript has the power of it.

¶Defining Interfaces

To define an interface in TypeScript, we use the interface keyword followed by the name of the interface and its properties.
Here’s an example:

interface Person {
  name: string;
  age: number;
  email?: string;
}

In this example, we define an interface called Person with three properties: name of type string, age of type number, and email of type string which is optional.

We can then use this interface to define objects that conform to this specification:

let person: Person = { name: "John", age: 30 };
console.log(person);

In this example, we define an object called person that conforms to the Person interface, with a name of "John" and an age of 30. We did not include an email property, but that’s okay because it is optional.

¶Optional Properties

In TypeScript, we can make properties optional by adding a ? after the property name in the interface definition.
Here’s an example:

interface Employee {
  name: string;
  age: number;
  email?: string;
  phone?: string;
}

In this example, we define an interface called Employee with four properties: name of type string, age of type number, email of type string which is optional, and phone of type string which is also optional.

We can then define objects that conform to this interface with or without the optional properties:

let employee1: Employee = { name: "John", age: 30, email: "john@example.com" };
let employee2: Employee = { name: "Jane", age: 25, phone: "555-1234" };
console.log(employee1);
console.log(employee2);

In this example, we define two objects called employee1 and employee2 that conform to the Employee interface. employee1 includes an email property, while employee2 includes a phone property.

¶Readonly Properties

In TypeScript, we can also define properties as readonly, which means they cannot be changed once they are set. To define a readonly property in an interface, we use the readonly keyword before the property name.
Here’s an example:

interface Car {
  make: string;
  model: string;
  readonly year: number;
}

In this example, we define an interface called Car with three properties: make of type string, model of type string, and year of type number which is marked as readonly.

We can then define objects that conform to this interface, but the year property cannot be changed once it is set:

let car: Car = { make: "Ford", model: "Mustang", year: 2020 };
console.log(car);

// Attempting to change the year property will result in a compile-time error
// car.year = 2021;

In this example, we define an object called car that conforms to the Car interface, with a make of "Ford", a model of "Mustang", and a year of 2020. Attempting to change the year property results in a compile-time error, which prevents accidental modification of the property.

¶Extending Interfaces

In TypeScript, we can extend an interface from another interface using the extends keyword. This allows us to reuse the properties and methods of an existing interface and add new properties or methods to the extended interface. This is great feature of TypeScript like programming language of Java, Python, PHP, C# and so on.
Here’s an example:

interface Shape {
  color: string;
}

interface Square extends Shape {
  sideLength: number;
}

let square: Square = { color: "red", sideLength: 10 };
console.log(square);

In this example, we define two interfaces: Shape with a color property of type string, and Square which extends the Shape interface and adds a sideLength property of type number. We then define an object called square that conforms to the Square interface, with a color of "red" and a sideLength of 10.

This allows us to create specialized interfaces that inherit properties from a base interface, reducing duplication of code and providing a way to organize related properties and methods.

¶Conclusion

Interfaces are a powerful feature of TypeScript that allow us to define contracts for objects and provide type safety in our code. By defining interfaces with optional or readonly properties, we can create flexible and immutable objects that are easy to work with. We can also extend interfaces to create specialized interfaces that inherit properties from a base interface, reducing code duplication and improving code organization.

Understanding interfaces is an important part of TypeScript development, and using them effectively can improve the quality and maintainability of our code.