Ways to expand a Typescript interface

Question

Ways to expand a Typescript interface

As an illustration, imagine I have the following interface:

interface Bar {
  value1: number;
  value2: number;
}

I want to include a method called calculateSum() that will return the sum of values on any object implementing this interface. How can this be achieved in Typescript?

I am looking to create a function like this:

function outputBarSum(bar: Bar) {
  console.log(???);
}

This function should not require manually assigning properties from bar to another class.

typescript

Answer 1

Answer №1

Expanding a TypeScript interface using the extends keyword:

interface A {
  num1: number;
  num2: number;
}

interface B extends A {
  total() : number;
}

To implement the interface, follow this example:

class C implements B {
  public num1: number;
  public num2: number;
  total() : number { return this.num1 + this.num2; }
}
var b : B = new C();

Note: The use of implements B is not required. Instances of C can still be assigned to B. However, including implements B will prompt the compiler to verify that the C class adheres to the B interface, resulting in a compile time error if it doesn't.

Answer 2

Expanding a TypeScript interface using the extends keyword:

interface A {
  num1: number;
  num2: number;
}

interface B extends A {
  total() : number;
}

To implement the interface, follow this example:

class C implements B {
  public num1: number;
  public num2: number;
  total() : number { return this.num1 + this.num2; }
}
var b : B = new C();

Note: The use of implements B is not required. Instances of C can still be assigned to B. However, including implements B will prompt the compiler to verify that the C class adheres to the B interface, resulting in a compile time error if it doesn't.

Answer 3

Answer №2

If you're looking for a solution, consider the code snippet below:

interface Bar {
  number1: number;
  number2: number;
}

class Bar {
  public static calculateSum(bar: Bar) {
    return bar.number1 + bar.number2;
  }
}

function displayBarSum(bar: Bar) {
  console.log(Bar.calculateSum(bar));
}

Of course, there may be other ways to tackle this problem with more elegance...

Answer 4

If you're looking for a solution, consider the code snippet below:

interface Bar {
  number1: number;
  number2: number;
}

class Bar {
  public static calculateSum(bar: Bar) {
    return bar.number1 + bar.number2;
  }
}

function displayBarSum(bar: Bar) {
  console.log(Bar.calculateSum(bar));
}

Of course, there may be other ways to tackle this problem with more elegance...

Answer 5

Answer №3

One possible solution could be:

interface Foo1 extends Foo {
  suma(): number
}

interface Foo{
  value1: number;
  value2: number;
}

http://www.typescriptlang.org/docs/handbook/interfaces.html#extending-interfaces

Here's an additional requirement:

I need to be able to write a function like this:

function printFooSum(foo: Foo) {
  console.log(???);
}

A point of confusion arises here:

and the function should not involve manual assignment of foo properties to some other class.

Are you trying to avoid this?

function printFooSum(foo: Foo) {
  console.log(foo.value1 + foo.value2);
}

Answer 6

One possible solution could be:

interface Foo1 extends Foo {
  suma(): number
}

interface Foo{
  value1: number;
  value2: number;
}

http://www.typescriptlang.org/docs/handbook/interfaces.html#extending-interfaces

Here's an additional requirement:

I need to be able to write a function like this:

function printFooSum(foo: Foo) {
  console.log(???);
}

A point of confusion arises here:

and the function should not involve manual assignment of foo properties to some other class.

Are you trying to avoid this?

function printFooSum(foo: Foo) {
  console.log(foo.value1 + foo.value2);
}

Ways to expand a Typescript interface

Answer №1

Answer №2

Answer №3

Similar questions

Angular data binding between an input element and a span element

Utilizing TypeScript's type inference within a higher order function to determine the input of the returned function

Creating valuable properties in TypeScript is a skill that requires knowledge and practice

Accessing properties using bracket notation in Typescript is a powerful feature that

Troubleshooting Axios errors when using createAsyncThunk function

The testString's dependencies are unresolved by Nest

Create a grade array for a group, with each grade containing a nested section array. Within each section, include

Creating and sharing a project in Typescript

Verify in Typescript if there is at least one value supplied

What is the best way to add an external .js file to my Angular 2 application?

The disappearance of the "Event" Twitter Widget in the HTML inspector occurs when customized styles are applied

The error message "SyntaxError: Cannot use import statement outside a module" is encountered when trying to import node-fetch in a Typescript file

Automatic browser refresh with the `bun dev` command

Setting a default time on a p-calendar: A step-by-step guide

Is there a way to verify if a component contains a child node with the tag <template></template>?

The 'initializeOnMount' property is a necessary requirement within the definition of the 'MoralisProviderInitializedProps' type

Can you explain the distinction between 'bigint' in lowercase and 'BigInt'?

Altering a public variable of a component from a sibling component

I am looking to transfer information from Angular 4 to Java servlet (cross-domain)

What is the issue with this asynchronous function?