Typescript中的“Computed”属性

如果它是一个接口,那么就没有语法,因为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 readable fullName: string; 和 readwrite fullName: string; -C#/.NET也有同样的问题: IReadOnlyList<T>}

Javascript支持 get 和 set Object.defineProperty ).

显然在typescript中有一个方便的语法(对于类):

class MyClass{
  firstName: string;
  lastName: string;

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

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

您还可以定义 get ters和 set 在JavaScript中。

在组件类中尝试以下操作:

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>