How to define a function in an interface in Angular?

Question

I have the following problem for which I did not find a working solution. I have an interface in my Angular Application:

export interface Person {
    forename: string;
    surname: string;
}

How would I have to define a function named getFullName() with following implementation:

getFullName(){
  return this.forename + " " + this.surname;
}

I tried it directly in the interface with the function as key but it did not work...

An interface cannot have implementation, you could only declare the existence of such a method (getFullName(): string). For implementation, you need a class. — jonrsharpe
– jonrsharpe, Commented Oct 13, 2020 at 9:17
@jonrsharpe So if I would have an interface, I would have to generate a class for that interface if I had a function signature in my interface? Then why would I want an interface? So, class would be a better idea if you have functions? — Opat
– Opat, Commented Oct 13, 2020 at 9:20
You can only have the actual function in the implementation, class-based or otherwise, not the interface. Interfaces do not exist in the emitted JS, so cannot have implementation. — jonrsharpe
– jonrsharpe, Commented Oct 13, 2020 at 9:25
I think I understood, an interface is like an abstract class. — Opat
– Opat, Commented Oct 13, 2020 at 9:28
No, explicitly not: "Unlike an interface, an abstract class may contain implementation details for its members." — jonrsharpe
– jonrsharpe, Commented Oct 13, 2020 at 9:29

mbdavis · Accepted Answer · 2020-10-13 09:23:08Z

9

You can use the function signature () => string to represent a function which takes 0 arguments and returns a string.

export interface Person {
    forename: string;
    surname: string;
    getFullName: () => string;
}

You can't define the implementation in the interface though.

To create a class that implements the interface you can do the following:

class MyPerson implements Person {
  constructor(public forename: string, public surname: string) { }
 
  getFullName() {
    return this.forename + " " + this.surname;
  } 
}

You possibly don't need the interface Person in this case - instead you could just use the class.

edited Oct 13, 2020 at 9:23

answered Oct 13, 2020 at 9:18

mbdavis

4,0302 gold badges24 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Opat Over a year ago

And where would I put the implementation?

mbdavis Over a year ago

@Opat updated. You should use an interface where you want to declare that objects are of a certain type and therefore can be used in a certain way. For example - if you have a few different class implementations (Student, Teacher for example) that have Person properties. If you just want to create person objects, then don't bother with an interface.

Opat Over a year ago

Ahh, i think now I understand. An interface is like an abstract class, or am I wrong?

mbdavis Over a year ago

It's a similar concept. The key difference is usually that interfaces don't contain implementations and that you can implement multiple interfaces (where normally abstract classes can contain implementations and a class can only extend one abstract class). These aren't concrete rules for every language though - but they are true of TypeScript. There are a ton of resources out there on abstract classes vs interfaces, so I won't try to rehash them here but have a look on google for some better explanations.

Collectives™ on Stack Overflow

How to define a function in an interface in Angular?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related