Typescript method on class undefined

Question

In Typescript I have a class Contact which implements an interface IContact. I want to add a property or function to the Contact class which returns the combination of two other fields (firstname and lastname). The definition of the IContact interface looks like this:

export interface IContact {
    firstname: string;
    lastname: string;
}

The Contact class look like this:

export class Contact implements IContact {
    constructor(
        public firstname: string,
        public lastname: string
    ) { }

    public fullname(): string {
        return this.firstname + " " + this.lastname;
    }
}

In my view I want to output the result of Contact.fullname() but I receive an error that fullname is not a function. I do have access to all other properties on that class.

==== UPDATE ===

I'll add some extra code to clarify some stuff. When I output the fullname property in my view I have tried contact.fullname() but also contact.fullname which results in nothing. In my component, trying to figure out what was happening I tried to output fullname to the console like this: console.log("FULLNAME " +contact.fullname());, but that give me the following message in the console: EXCEPTION _this.contact.fullname is not a function

===== UPDATED WITH ANSWER ========

As Sakuto stated correctly the list of contacts is created by some json received from the server. By creating a new instance entirely by calling it's constructor i was able to output the fullname property. Thanks Sakuto!

`Contact.fullname()` .. are you calling _class.function()_? if so the function needs to be static.. — Suraj Rao, Apr 12 '17 at 11:04
No I'm calling the function on an instance of the `Contact` class. — Bunnynut, Apr 12 '17 at 11:06
The question is how you create your `Contact` object? See Sakuto's answer. — Ján Halaša, Apr 12 '17 at 11:17

LoïcR · Accepted Answer · 2017-04-12T11:41:28.497

22

You are probably trying to call this method on an object dynamically casted from a JSON. Dynamically casted object does not have the method defined in the class, they just respect the contract and have the property.

The only way to make your current code work is to create a new instance of Contact instead of just casting it with <Contact> yourObject;

The solution would be to do something like this:

let contactsList: Contact[] = [];
yourServiceReturn.ForEach(c => contactsList[] = new Contact(c.name, c.surname));
// You can now call getFullName on the object stored on contactsList

edited Apr 12 '17 at 11:41

answered Apr 12 '17 at 11:14

LoïcR

4,940
1
34
50

You are right that is the case and i understand the problem but not the solution. Does it mean the the `Contact` class should not implement the `IContact` interface but have the same properties with a method `public fullname(): string`? Could i then do the following: `var contact = contactItemFromCollection;` `console.log(contact.fullname());` – Bunnynut Apr 12 '17 at 11:36
No, the problem is that this kind of behavior is not implemented in the language, you can't cast an object to a class and get the method, you have to manually instantiate the object. Check my answer. – LoïcR Apr 12 '17 at 11:42
1

Ah yes! Thank you, that did it. I guess i was a bit too much in C#-mode. – Bunnynut Apr 12 '17 at 11:49
@Sakuto - how did you know this? I didn't find any documentation regarding this gotcha for JSON-loaded TS classes.. – Coruscate5 Sep 06 '17 at 20:42

score 0 · Answer 2 · answered Feb 11 '20 at 12:37

0

How do I cast a JSON object to a typescript class

onReceiveCompany( jsonCompany : any ) 
{
   let newCompany = new Company( jsonCompany );

   // call the methods on your newCompany object ...
}

answered Feb 11 '20 at 12:37

Sunny127

265
3
8

Typescript method on class undefined

2 Answers2