Свойство «Computed» в Typescript - PullRequest
Новая
       12

Свойство «Computed» в Typescript

0 голосов
/ 10 ноября 2018

Ребята, я нахожусь в процессе "обучения на практике" в Angular 6 и 7, и я сталкивался с этой проблемой несколько раз.

Представьте, что у меня есть класс / интерфейс / тип - например, Person - с несколькими свойствами, которые возвращаются вызовом Web API - что-то вроде этого: 

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

То, что я хотел бы иметь, это показать полное имя (например, «FirstName + [Space] + LastName»), например, угловая сетка (AG-Grid) или где-то еще - где я не могу использовать выражение concat или что-то еще, но мне нужно обратиться к одному свойству класса / интерфейса / типа.

В C # я бы просто создал свойство 

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

и покончим с этим - но как я могу это сделать в Typescript ?? Из того, что я читал и исследовал, похоже, что не поддерживается - правда?!? !!? Как это может быть??? Похоже на такую ​​простую и часто используемую операцию - почему это не существует в Typescript? Или он существует - и я просто не нашел способ сделать это в TS?

Ответы [ 3 ]

0 голосов
/ 10 ноября 2018

Вы также можете определить get уровней и 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>
0 голосов
/ 10 ноября 2018

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}`;
  }
}

Что касается интерфейсов, я не уверен, что это возможно, поскольку их единственная цель - описание данных, а не их реализация.

0 голосов
/ 10 ноября 2018

Если это интерфейс, то здесь нет синтаксиса, потому что все свойства в JavaScript могут иметь функции получения / установки вместо того, чтобы быть открытыми полями. Это проблема реализации.

Кстати, члены TypeScript используют camelCase: 

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

    fullName : string;
}

class SimplePerson implements Person {

    // ...

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