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）或其他地方-我不能使用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

定义属性时（主要使用get），JavaScript支持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中定义get ters和set ters。

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

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>

Typescript

3 个答案: