angular - Typescript 中的 "Computed"属性

Question

伙计们，我正在 Angular 6 和 7 中“边做边学”，我多次遇到这个问题。

假设我有一个类/接口(interface)/类型——例如Person - 具有一些属性，由 Web API 调用返回 - 如下所示:

export interface Person {
    FirstName: string;
    LastName: string;
    JobTitle: string;
    // so other properties - not relevant to this question
}

我希望能够显示全名(例如“名字 + [空格] + 姓氏”)，例如Angular 网格 (AG-Grid) 或其他地方 - 我不能使用 concat 表达式或任何东西，但我需要引用类/接口(interface)/类型上的单个属性。

在 C# 中，我只创建一个属性

string FullName { get { return $"{FirstName} {LastName}"; } }

并完成它 - 但我如何在 Typescript 中执行此操作？从我一直在阅读和研究的内容来看，这似乎不受支持 - 真的吗？!？!？这个怎么可能？？？看起来像这样一个简单且经常使用的操作 - typescript 中不存在的原因是什么？？或者它是否存在 - 而我只是没有找到在 TS 中执行此操作的方法？

Answer 1

如果它是一个接口(interface)那么就没有语法，因为 JavaScript 中的所有属性都可以有 getter/setter 函数而不是公开的字段。这是一个实现问题。

TypeScript 中的 BTW 成员使用 camelCase不是TitleCase :

export interface Person {
    // get + set:
    firstName: string;
    lastName : string;
    jobTitle : string;

    // get-only:
    readonly fullName : string;
}

class SimplePerson implements Person {

    public firstName: string; // value-property (“field”)
    public lastName: string;
    public jobTitle: string;

    get fullName(): string { // read-only property with getter function (this is not the same thing as a “function-property”)
        return this.firstName + " " + this.lastName;
    }
}

---

_{我注意到 TypeScript 的设计者选择使用关键字 readonly 令人困惑在接口(interface)中表示“可读”属性，但它实际上并不禁止实现也具有属性 setter - 我更希望语法类似于 readable fullName: string;和 readwrite fullName: string; - C#/.NET 有同样的问题:IReadOnlyList<T>接口(interface)并不意味着实现必须是不可变的。}