如何用方法声明对象的类型?

Question

我有一个对象如下-

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

如何为fullname方法声明类型?

Answer 1

这取决于你想要输入多少。

选项1

如果你想要一些东西来告诉你fullName()函数返回的是什么，你可以使用泛型和模板字面值来实现它，像这样:

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"
}
}

选项2

如果您不关心返回的文字类型，您可以使用更简单的内容，如:

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}`
}
}

Answer 2

这里有两个主要问题:

1. 您正在创建一个Person类型的对象。您不能添加fullName属性，因为它没有在Person类型中定义。
2. 你在一个对象中调用this。关键字this指的是调用上下文，这意味着在您的情况下，this将被重化为window。

一个简单的解决方案:

创建一个类!这将允许您实现fullname方法，并使用this关键字，然后它将引用您的类实例!

你的问题的一个简单实现是:

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"