Using Interfaces in TypeScript

TypeScript is a statically typed language that allows developers to define the structure of objects using interfaces. An interface is a way to define a blueprint of a class, including the properties, methods, and their types. In this article, we will explore how to use the 'interface' keyword in TypeScript.

Defining an Interface

An interface is defined using the 'interface' keyword followed by the name of the interface. Here is an example of a simple interface:

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

In this example, we have defined an interface called 'Person' with two properties: 'name' and 'age'. The 'name' property is a string, and the 'age' property is a number.

Implementing an Interface

A class can implement an interface using the 'implements' keyword. Here is an example of a class that implements the 'Person' interface:

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

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

In this example, we have defined a class called 'Employee' that implements the 'Person' interface. The 'Employee' class has two properties: 'name' and 'age', which match the properties defined in the 'Person' interface.

Optional Properties

An interface can also define optional properties using the '?' symbol. Here is an example of an interface with an optional property:

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

In this example, we have defined an interface called 'Person' with three properties: 'name', 'age', and 'address'. The 'address' property is optional, meaning that it can be omitted when implementing the interface.

Readonly Properties

An interface can also define readonly properties using the 'readonly' keyword. Here is an example of an interface with a readonly property:

interface Person {
  readonly id: number;
  name: string;
  age: number;
}

In this example, we have defined an interface called 'Person' with three properties: 'id', 'name', and 'age'. The 'id' property is readonly, meaning that it cannot be modified once it is set.

Function Types

An interface can also define function types. Here is an example of an interface with a function type:

interface MathOperations {
  add(x: number, y: number): number;
  subtract(x: number, y: number): number;
}

In this example, we have defined an interface called 'MathOperations' with two function types: 'add' and 'subtract'. The 'add' function takes two numbers as arguments and returns a number, and the 'subtract' function takes two numbers as arguments and returns a number.

Implementing a Function Type

A class can implement a function type using the 'implements' keyword. Here is an example of a class that implements the 'MathOperations' interface:

class Calculator implements MathOperations {
  add(x: number, y: number): number {
    return x + y;
  }

  subtract(x: number, y: number): number {
    return x - y;
  }
}

In this example, we have defined a class called 'Calculator' that implements the 'MathOperations' interface. The 'Calculator' class has two methods: 'add' and 'subtract', which match the function types defined in the 'MathOperations' interface.

Index Signatures

An interface can also define index signatures. Here is an example of an interface with an index signature:

interface StringArray {
  [index: number]: string;
}

In this example, we have defined an interface called 'StringArray' with an index signature. The index signature specifies that the interface has a string property for each number index.

Implementing an Index Signature

A class can implement an index signature using the 'implements' keyword. Here is an example of a class that implements the 'StringArray' interface:

class MyStringArray implements StringArray {
  private strings: string[];

  constructor() {
    this.strings = [];
  }

  [index: number]: string {
    get() {
      return this.strings[index];
    }
    set(value: string) {
      this.strings[index] = value;
    }
  }
}

In this example, we have defined a class called 'MyStringArray' that implements the 'StringArray' interface. The 'MyStringArray' class has an index signature that matches the index signature defined in the 'StringArray' interface.

Extending Interfaces

An interface can extend another interface using the 'extends' keyword. Here is an example of an interface that extends another interface:

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

interface Employee extends Person {
  department: string;
}

In this example, we have defined an interface called 'Employee' that extends the 'Person' interface. The 'Employee' interface has all the properties of the 'Person' interface, plus an additional property called 'department'.

Intersection Types

An interface can also define intersection types. Here is an example of an interface with an intersection type:

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

interface Employee {
  department: string;
}

interface EmployeePerson extends Person & Employee {}

In this example, we have defined an interface called 'EmployeePerson' that is an intersection of the 'Person' and 'Employee' interfaces. The 'EmployeePerson' interface has all the properties of both interfaces.

FAQs

What is an interface in TypeScript?

An interface is a way to define a blueprint of a class, including the properties, methods, and their types.

How do I define an interface in TypeScript?

An interface is defined using the 'interface' keyword followed by the name of the interface.

How do I implement an interface in TypeScript?

A class can implement an interface using the 'implements' keyword.

What is an optional property in an interface?

An optional property is a property that can be omitted when implementing the interface.

What is a readonly property in an interface?

A readonly property is a property that cannot be modified once it is set.

How do I define a function type in an interface?

A function type is defined using the function name followed by the parameter types and return type.

How do I implement a function type in an interface?

A class can implement a function type using the 'implements' keyword.

What is an index signature in an interface?

An index signature specifies that the interface has a property for each number index.

How do I implement an index signature in an interface?

A class can implement an index signature using the 'implements' keyword.

How do I extend an interface in TypeScript?

An interface can extend another interface using the 'extends' keyword.

What is an intersection type in an interface?

An intersection type is a type that is an intersection of two or more types.

In conclusion, interfaces are a powerful tool in TypeScript that allow developers to define the structure of objects and ensure type safety. By using interfaces, developers can write more maintainable and scalable code.