Typescript Type vs Interface

manthanank

Manthan Ankolekar

Posted on August 16, 2023

Typescript Type vs Interface

TypeScript offers both the type and interface constructs for defining shapes and structures of data. The choice between them depends on the specific use case and the features you need. There's no one-size-fits-all answer, as both have their own advantages and limitations. Let's explore both options:

Interfaces:

  1. Declaration Merging: Interfaces in TypeScript support declaration merging. This means you can extend an existing interface by declaring it again with the same name. This can be useful when working with third-party libraries and adding custom properties.

  2. Implements Clause: If you're working with classes, interfaces can be used to enforce that a class adheres to a particular structure by using the implements clause.

  3. Extending Interfaces: Interfaces can extend other interfaces, allowing you to build complex and reusable structures.

  4. Compatibility with Class and Object Types: Interfaces can describe class types, object types, and functions. They can be used to define the shape of object literals as well as the interface that a class implements.

Types:

  1. Union and Intersection Types: The type keyword in TypeScript allows you to create union types and intersection types. Union types combine multiple types into one, while intersection types create a type that includes all properties of the combined types.

  2. Mapped Types: The type keyword supports mapped types, which enable you to transform existing types into new types. This is useful for generating new types based on existing ones, such as making all properties optional or readonly.

  3. Tuple Types: The type keyword can be used to define tuple types, which allow you to specify arrays with fixed lengths and specific types for each element.

  4. Type Aliases: type can be used to create type aliases, which can make complex type expressions more readable and easier to reuse.

When to Use Which:

Use Interfaces When:

  • You're working with objects or classes and need to enforce a certain structure or contract.
  • You want to extend or merge declarations.
  • You want to define contracts that a class should implement using the implements clause.

Use Types When:

  • You need to create union types, intersection types, or mapped types.
  • You're working with complex type transformations or aliases.
  • You're defining tuple types.

In many cases, the choice between type and interface is a matter of personal preference and the specific needs of your project. TypeScript itself does not enforce a hard distinction between them; they often overlap in functionality. It's common to see a mix of both type and interface declarations in a TypeScript codebase based on the requirements of different scenarios.

Ultimately, the "better" choice depends on the context of your project and the specific features you require.

Example Using Interface:

interface Person {
  firstName: string;
  lastName: string;
  age: number;
}

class Student implements Person {
  constructor(public firstName: string, public lastName: string, public age: number, public studentId: string) {}
}

const person: Person = new Student("John", "Doe", 20, "123456");
console.log(person);
Enter fullscreen mode Exit fullscreen mode

In this example, we're using an interface Person to define the structure of a person object. The Student class implements the Person interface, ensuring it adheres to the defined structure. The implements clause is a key feature of interfaces when working with classes.

Example Using Type:

type Point = {
  x: number;
  y: number;
};

type Vector = Point & {
  magnitude: number;
};

const origin: Point = { x: 0, y: 0 };
const vector: Vector = { x: 3, y: 4, magnitude: 5 };

function printCoordinates(point: Point) {
  console.log(`x: ${point.x}, y: ${point.y}`);
}

printCoordinates(origin);
Enter fullscreen mode Exit fullscreen mode

Here, we're using the type keyword to define two types: Point and Vector. We're also using an intersection type to create the Vector type by combining properties from the Point type and adding an extra property magnitude. Additionally, the printCoordinates function takes a parameter of type Point.

When to Use Each:

  • If you need to define a contract for a class to adhere to, especially when dealing with class inheritance and implements clauses, use an interface.

  • If you need to create complex types, such as union types, intersection types, mapped types, or type aliases, use the type keyword.

Remember that you can often achieve similar results with both interface and type, but the choice depends on the features and use cases you require. It's common to use a combination of both based on the needs of your project.

💖 💪 🙅 🚩
manthanank
Manthan Ankolekar

Posted on August 16, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

How to Organize Better with TS Interfaces
TypeScript Function
typescript TypeScript Function

May 22, 2024

Typescript Type vs Interface
typescript Typescript Type vs Interface

August 16, 2023

Typescript: Interface
typescript Typescript: Interface

May 10, 2023

Get Validated With Zod
typescript Get Validated With Zod

May 10, 2023