You are using typescript interfaces incorrectly

A: Don't think about help.
B: It's hard not to think about help when you write in javascript.

I heard something like this dialogue at one of the conferences. Typescript was called upon to solve the problem of the lack of strict typing.

Specifically in this article, I would like to consider one of the techniques for using typescript interfaces, which seems to me not obvious, I looked at it and was able to evaluate its advantages in the process of writing applications in the golang language.

For most typescript developers, types and interfaces don't make much difference as such.

type Dog = {name: string, age: number}

interface Dog {
name: string,
age: number
}

Both writing using an interface and using a type will essentially be able to continue to work equally well, and suggest typing errors during further development

What am I offering?

I propose to separate these 2 concepts:

  1. We use types when we want to describe certain attributes of objects.

  2. Interfaces when we want to describe the behavior of objects and their methods.

First, let's create the “greeter” interface.

interface greeter {
  greet() : void;
}

Let's create the types “Dog” and “Cat”.

type Dog = {name: string, age: number}
type Cat = {first_name: string, second_name: string, owner: string}

As we can see, these types have different sets of attributes.

Next, let's create a function that takes as its first argument an object that satisfies the “greeter” interface and then calls its “greet” method.

function greet(g: greeter) {
  g.greet();
}

In order for our types “Dog” and “Cat” to be used when calling the “greet” function, we must explicitly combine the types “Dog” and “Cat” with the “greeter” interface

type Dog = {name: string, age: number} & greeter
type Cat = {first_name: string, second_name: string, owner: string} & greeter

We implement an object of each type

const dog: Dog = {
  name: "jack",
  age: 10,
  
  greet() {
    console.log(`hello im dog. My name is ${this.name}. I'm ${this.age} years old.`)
  }
}

const cat: Cat = {
  first_name: "Myley",
  second_name: "Meows",
  owner: "Ivan",
  
  greet() {
    console.log(`hello im cat. My name is ${this.first_name} ${this.second_name}. My owner name is ${this.owner}`);
  }
}

What we have? We have 2 objects, different in their implementation, but they are united by the presence of a method specified in the “greeter” interface

Let's call these methods

greet(dog);//"hello im dog. My name is jack. I'm 10 years old."
greet(cat);//"hello im cat. My name is Myley Meows. My owner name is Ivan"

Result:

Interfaces allow you to separate the implementation from the so-called business layer.

For example, from the point of view of implementing a user and an administrator within the same application, they may have a different set of attributes. But in the end, to create them, you need to use the same backend handler.

The code becomes cleaner and, as a result, easier to understand.

Allows you to divide applications into smaller, independent layers.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *