The Difference Between Interfaces and Types in TypeScript

In TypeScript, interfaces and types are two important concepts that are used to define the structure of objects. Both are used to specify the shape of an object, but they have some key differences.

What are Interfaces?

Interfaces in TypeScript are used to define a contract for an object. An interface defines a set of properties and methods that an object must have in order to be considered an instance of that interface. Interfaces are a way to ensure that objects have certain properties and methods, without specifying how they are implemented. For example, you might define an interface for a "Person" object that has properties such as "name" and "age", and methods such as "getName" and "setAge".

What are Types?

On the other hand, types in TypeScript are used to define the specific structure of an object. A type can be a primitive value (such as a number or string) or a complex object. Types are used to specify the exact shape of an object, including the types of its properties and methods. For example, you might define a type for a "Person" object that has a string property called "name" and a number property called "age".

The Differences

One key difference between interfaces and types is that interfaces are not included in the JavaScript output, while types are. This means that interfaces are used only for type checking in TypeScript and do not affect the runtime behavior of the JavaScript code. On the other hand, types are included in the JavaScript output and can affect the runtime behavior of the code.

Another difference is that interfaces can extend other interfaces, while types cannot. This means that an interface can inherit the properties and methods of another interface, allowing for more complex and reusable contracts.

In general, interfaces are a good choice when you want to define a contract for an object without specifying how it is implemented. Types are a good choice when you want to define the exact structure of an object. While both are important concepts in TypeScript, they serve different purposes and are used in different ways.

Example

// Interface example
interface Person {
  name: string;
  age: number;
  getName(): string;
  setAge(age: number): void;
}

let person: Person = {
  name: "John Smith",
  age: 30,
  getName() {
    return this.name;
  },
  setAge(age: number) {
    this.age = age;
  }
};
console.log(person.getName()); // "John Smith"
person.setAge(35);
console.log(person.age); // 35

// Type example
type Person = {
  name: string;
  age: number;
}

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

In the first example, an interface called "Person" is defined with properties "name" and "age" and methods "getName" and "setAge". An object called "person" is then created that implements the "Person" interface. The object has the properties and methods defined in the interface and can be assigned to the "Person" type.

In the second example, a type called "Person" is defined with properties "name" and "age". An object called "person" is then created that has the shape specified by the "Person" type.

It's worth noting that in the second example, the name of the type is the same as the interface, but this is just a coincidence and it's a common practice to give meaningful names to types and interfaces.

In general, interfaces provide a way to define a contract for an object, while types define the exact structure of an object. The examples above demonstrate how interfaces and types can be used to define the shape of an object in TypeScript.

Summary

In summary, interfaces and types are two important concepts in TypeScript that are used to define the structure of objects. Interfaces are used to define a contract for an object, while types are used to define the exact structure of an object. Interfaces are not included in the JavaScript output, while types are. Interfaces can extend other interfaces, while types cannot.