关于Typescipt接口和计算属性的问题(Angular)

Question

我正试图在typescript接口上实现一个计算机属性，但我似乎无法理解。。。我可能只是忽略了一些简单的事情，因为我正处于沮丧的时刻，当我到达那个时刻时，我就会失去注意力；/

member.model.ts

interface MemberName {
given: string;
family: string;
preferred?: string;
}
interface MemberModel {
id: string;
name: MemberName;
readonly displayName?: () => string; 
}
export class Member implements MemberModel {
public id: string;
public name: MemberName;
displayName?(): string {
return this.name.preferred ?? `${ this.name.given } ${ this.name.family }`;
}
}

member.service.ts

import { Injectable } from '@angular/core';
import { Member } from '../models/member';
@Injectable({
providedIn: 'root'
})
export class MemberService {
public member: Member;
constructor() {
this.member = {
id: 'test',
name: {
given: 'Unknown',
family: 'User'
}
}
}
login() {
this.member.name.given = 'Authenticated';
this.member.name.family = 'Member';
console.log('login', this.member)
}
logout() {
this.member.name.given = 'Anonymous';
this.member.name.family = 'Member';
console.log('logout', this.member);
}
}

我可以调用memberService.login()，它返回

id: 'test',
name: {
given: 'Authenticated',
family: 'Member'
}

我可以调用memberService.logout()，它返回

id: 'test',
name: {
given: 'Anonymous',
family: 'Member'
}

但无论我尝试什么，我似乎都无法显示displayName计算属性？！？

Answer 1

Member是一个类，只需将一个简单的javascript对象分配给字段就不会得到类实例。正如我所见，你添加了一个？此处为CCD_ 5。我相信你这样做是因为你不能把一个对象分配给ts类"asserion"；。如果你想让this.member有一个方法，你应该在那里放一个类实例，然后用字段填充它。以某种方式这样会起作用：

constructor() {
this.member = new Member();
Object.assign(this.member, {/*... any fields you like */});
}

现在您可以删除方法名称

中的奇数?，也不清楚您希望如何引用displayName属性。如果你想把它作为一个方法，那么你的版本就可以了，但如果你想让它作为一种计算属性，那么你可以用get关键字定义getter，比如这个

get displayName(): string {
return this.name.preferred ?? `${ this.name.given } ${ this.name.family }`;
}

Answer 2

您需要在类中创建一些方法，该方法将返回一个具有您的值的对象。这与不以相同方式返回getters的方式非常相似。

下面是一个正在发生的事情的例子：

class Sample {
constructor() {
this.foo = 'bar';
}
get bar() { return `${this.foo} and from getter` };

toObj() {
return { ...this, bar: this.bar };
}
}
const samp = new Sample();
console.log(samp); // bar nor present
console.log(samp.bar); // but it's there?
console.log(JSON.stringify(samp)); // but it's not there!
console.log(samp.toObj()); // it's there!