Typescript中的“计算”属性

Question

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

想象一下，我有一个类/接口/类型-例如Person-具有一些属性，这些属性是通过Web API调用返回的-如下所示：

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

我想要做的是在Angular网格（AG-Grid）或其他地方显示全名（例如“ FirstName + [Space] + LastName”）-在这里我不能使用concat表达式或其他任何东西，但我需要在类/接口/类型上引用单个属性。

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

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

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

Answer 1

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

TypeScript中的BTW成员使用camelCase：

export interface Person {
    firstName: string;
    lastName : string;
    jobTitle : string;

    fullName : string;
}

class SimplePerson implements Person {

    // ...

    get fullName(): string {
        return this.firstName + " " + this.lastName;
    }
}

Answer 2

Javascript 支持get和set定义属性时（主要使用Object.defineProperty）。

显然，打字稿中有一个方便的语法（对于类）：

class MyClass{
  firstName: string;
  lastName: string;

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

  get fullName(){
    return `${this.firstName} ${this.lastName}`;
  }
}

关于接口，我不确定这样的事情是否可能，因为它们的唯一目的是数据描述而不是实现。

Answer 3

您还可以在 JavaScript 中定义getters 和setters。

在您的组件类中尝试一下：

person: Person;
...
// You got the person Object from your Backend API.
...
// Now
get fullName() { 
  return `${this.person.firstName} ${this.person.lastName}`; 
}

然后在你的模板中：

fullName只需像这样使用：

<p>{{ fullName }}</p>