I have an object as follows -

type Person = {
  firstname: string,
  lastname: string,
}

let person: Person = {
   firstname: "John",
   lastname: "Doe",
   fullname: function() {
     return `${this.firstname} ${this.lastname}`
   }
}

How to declare type for fullname method?

CodePudding user response：

You have two main problems here :

1. You are creating an object of type Person. You cannot add the fullName attribute as it is not defined in the Person type.
2. You are calling this inside an object. The keyword this, refers to the calling context, meaning that this, will in your case refor to the window.

One simple solution :

Create a class! This will allow you to implement your fullname method, and use the this keyword, which will then refer to your class instance!

A simple implementation to your problem would then be:

class Person {
  private firstName: string;
  private lastName: string;

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

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


const johnDoe: Person = new Person('John', 'Doe');

console.log(johnDoe.fullName()); // "John Doe"

CodePudding user response：

It depends on how much typing you want.

Option 1

If you want something that will tell you exactly what's the fullName() function returning, you can use generics and template literals to achieve it, like so:

type Person<FirstNameT extends string, LastNameT extends string> = {
  firstname: FirstNameT,
  lastname: LastNameT,
  fullname: () => `${FirstNameT} ${LastNameT}`
}

let person: Person<"John", "Doe"> = {
   firstname: "John",
   lastname: "Doe",
   fullname: function() {
     return `${this.firstname} ${this.lastname}` // typed as () => "John Doe"
   }
}

Option 2

If you aren't concerned about the literal type of the return you can use something simpler like:

type Person = {
  firstname: string,
  lastname: string,
  fullname: () => `${Person["firstname"]} ${Person["lastname"]}`
}

let person: Person = {
   firstname: "John",
   lastname: "Doe",
   fullname: function() {
     return `${this.firstname} ${this.lastname}` // typed as () => `${string} ${string}`
   }
}