Can you explain the concept of ’interfaces’ in TypeScript? — TypeScript Interview Question #6

In TypeScript, the concept of interfaces is used to define the structure of a specific object or a set of objects, ensuring that they strictly adhere to this structure. Interfaces are useful for defining contracts within a codebase and can be utilized alongside classes to enforce specific object shapes.

Essentially, an interface in TypeScript consists of a collection of key-value pairs, where keys are the property names and values are the types of their corresponding values. They provide a way of defining custom types without implementing the logic behind those types. This is mainly useful for type checking and code maintainability.

Here’s a simple example of an interface:

interface Point {
  x: number;
  y: number;
}

In this example, we define a ‘Point‘ interface representing a point in two-dimensional space. It has two properties, ‘x‘ and ‘y‘, which must be of the ‘number‘ type.

Now, let’s say we have a function ‘computeDistance‘ that takes two ‘Point‘ objects as arguments and calculates the distance between them:

function computeDistance(p1: Point, p2: Point): number {
  const dx = p1.x - p2.x;
  const dy = p1.y - p2.y;
  return Math.sqrt(dx * dx + dy * dy);
}

When we call this function with objects that adhere to the ‘Point‘ interface, TypeScript will not show any errors:

const pointA: Point = { x: 0, y: 0 };
const pointB: Point = { x: 3, y: 4 };
console.log(computeDistance(pointA, pointB)); // 5

However, if we try to pass an object that does not strictly follow the ‘Point‘ interface, TypeScript will throw a compile-time error:

// Error: Property 'x' is missing in type '{ y: number; }' but required in type 'Point'.
const pointC: Point = { y: 5 };

In short, interfaces in TypeScript are powerful tools that help us define and enforce structured data within a codebase, improving the maintainability, and reliability of the code. They are especially helpful in the context of large projects, where enforcing contracts becomes crucial for long-term success.

Here’s a small chart demonstrating the concept of interfaces:

In this chart, we visualize the points defined in our example, representing the two-dimensional space where the points ‘pointA‘ and ‘pointB‘ are located. The interface ‘Point‘ would define the structure for any ‘x‘ and ‘y‘ values within this space.