Is it possible to add functionality to Interfaces in TypeScript?

Question

Is it possible to add functionality to Interfaces in TypeScript?

In my software development project, I am working with an Interface and I want to create computed properties that rely on other properties within the interface.

For instance, the Person interface includes properties for first name and last name. How can I enhance the Person interface so that it includes a new property called fullName, which combines the values of the first name and last name properties for all implementors?

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

class Pilot implements Person {
     constructor(public firstName: string, public lastName: string) {}
}

class Sailer implements Person {
     constructor(public firstName: string, public lastName: string) {}
}

const pilot = new Pilot("Joe", "Alpha")
const sailer = new Sailer("Jane", "Beta")

// How can I extend `Person` interface to include fullName property?

console.log(pilot.fullName) // Joe Alpha
console.log(sailer.fullName) // Jane Beta

javascript typescript

Answer 1

Answer №1

My approach would be to continue with the parent class in this scenario

interface IPerson {
  firstName: string;
  lastName: string;
}

class Person implements IPerson {
  constructor(public firstName: string, public lastName: string) {}

  getFullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

class Pilot extends Person {}

class Sailer extends Person {}

const pilot = new Pilot("Joe", "Alpha")
const sailer = new Sailer("Jane", "Beta")

console.log(pilot.getFullName())
console.log(sailer.getFullName())

You can check out the demo here.

Answer 2

My approach would be to continue with the parent class in this scenario

interface IPerson {
  firstName: string;
  lastName: string;
}

class Person implements IPerson {
  constructor(public firstName: string, public lastName: string) {}

  getFullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

class Pilot extends Person {}

class Sailer extends Person {}

const pilot = new Pilot("Joe", "Alpha")
const sailer = new Sailer("Jane", "Beta")

console.log(pilot.getFullName())
console.log(sailer.getFullName())

You can check out the demo here.

Answer 3

Answer №2

If you want to add a fullName property to the Person interface, one approach is to implement it using a getter method:

interface Person {
  firstName: string;
  lastName: string;
  fullName: string;
}

class Driver implements Person {
  firstName: string;
  lastName: string;

  constructor(firstName: string, lastName: string) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  get fullName(): string {
    return `${this.firstName} ${this.lastName}`;
  }
}

class Diver implements Person {
  firstName: string;
  lastName: string;

  constructor(firstName: string, lastName: string) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  get fullName(): string {
    return `${this.firstName} ${this.lastName}`;
  }
}

const driver = new Driver("John", "Doe");
const diver = new Diver("Sarah", "Smith");

console.log(driver.fullName); // John Doe
console.log(diver.fullName); // Sarah Smith

Answer 4

If you want to add a fullName property to the Person interface, one approach is to implement it using a getter method:

interface Person {
  firstName: string;
  lastName: string;
  fullName: string;
}

class Driver implements Person {
  firstName: string;
  lastName: string;

  constructor(firstName: string, lastName: string) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  get fullName(): string {
    return `${this.firstName} ${this.lastName}`;
  }
}

class Diver implements Person {
  firstName: string;
  lastName: string;

  constructor(firstName: string, lastName: string) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  get fullName(): string {
    return `${this.firstName} ${this.lastName}`;
  }
}

const driver = new Driver("John", "Doe");
const diver = new Diver("Sarah", "Smith");

console.log(driver.fullName); // John Doe
console.log(diver.fullName); // Sarah Smith

Answer 5

Answer №3

In TypeScript, it appears that binding getter functions directly to interfaces is not supported. However, a workaround would be to utilize a parent class named Person that implements the IPerson interface:

interface IPerson {
  firstName: string;
  lastName: string;
}

class Person implements IPerson {
  constructor(public firstName: string, public lastName: string) {}
  public get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

class Pilot extends Person {
  constructor(public firstName: string, public lastName: string) {
    super(firstName, lastName);
  }
}

class Sailer extends Person {
  constructor(public firstName: string, public lastName: string) {
    super(firstName, lastName);
  }
}

const pilot = new Pilot("Joe", "Alpha");
const sailer = new Sailer("Jane", "Beta");

console.log(pilot.fullName); // Joe Alpha
console.log(sailer.fullName); // Jane Beta

Answer 6

In TypeScript, it appears that binding getter functions directly to interfaces is not supported. However, a workaround would be to utilize a parent class named Person that implements the IPerson interface:

interface IPerson {
  firstName: string;
  lastName: string;
}

class Person implements IPerson {
  constructor(public firstName: string, public lastName: string) {}
  public get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

class Pilot extends Person {
  constructor(public firstName: string, public lastName: string) {
    super(firstName, lastName);
  }
}

class Sailer extends Person {
  constructor(public firstName: string, public lastName: string) {
    super(firstName, lastName);
  }
}

const pilot = new Pilot("Joe", "Alpha");
const sailer = new Sailer("Jane", "Beta");

console.log(pilot.fullName); // Joe Alpha
console.log(sailer.fullName); // Jane Beta

Is it possible to add functionality to Interfaces in TypeScript?

Answer №1

Answer №2

Answer №3

Similar questions

Option to Exclude Files in Gulp-uncss

Is it possible to access forms and input fields in an AngularJS script without having to pass them from the HTML code?

Creating a React TypeScript component that accepts generic props to be passed down to its children

Issues with Angular routing functionality being experienced

Having trouble converting svg to png, thinking it might be due to discrepancies in svg elements

Struggling to maintain data consistency among controllers in Angular by utilizing the rootScope, only to encounter persistent issues with

Leverage the power of jQuery to manipulate video tags

Tips on incorporating jstree into an Angular 2 application with TypeScript and @types/jstree

The body parser is causing issues with decoding base64 strings

Manipulating and passing structures of the same type in class methods

What is the best way to upload items by utilizing text input and a submission button?

Advantages and Disadvantages of Implementing Ajax for Form Validation

Ensure there is a gap between each object when they are arranged in a

The field 'index' is not found in the type 'Ingredient' in Angular 8

The classification of a dictionary and a list in Typescript

What is the best method to set up separate column filters when using DataTables with serverSide enabled?

Typescript error code TS7053 occurs when an element is detected to have an implicit 'any' type due to an expression of a different type

Mastering form submission in Vue.js

save the received data to a new document

Set up a loop that retrieves data from an array and dynamically populates the content of my template card component