Angular — Не работают стандартные значения переменой?

Question

[waltaki]

Здравствуйте.

Привожу пример:
есть у меня

export class NameSurName {
  name: string;
  surname: string = 'Иванов'
}

export class NameSurName Component implements OnInit {
  private nameSurName: NameSurName;
  constructor(private http: HttpClient) {}
}

ngOnInit() {
  this.http.get('api/namesurname').subscribe((resp) => {
    this.nameSurName = resp.data // {name: 'Вася'} 
  })
}

Если ко мне, с api приходит только поле name, то surname undefined...((
Почему так? Как решить?

Answer 1

[Pavel Pikat]

HttpClient не создает классы, вам нужно вызывать конструктор вручную, например через map

this.http.get('api/namesurname')
.pipe(
    map((resp) => resp.data.map(item => new NameSurName(item)),
}
.subscribe((resp) => {
    this.nameSurName = resp.data // {name: 'Вася'} 
  })

export class NameSurName {
  name: string;
  surname: string = 'Иванов'

constructor(props: Partial<NameSurName >) {
   Object.assign(this, props);
}

Comments

[Demian Smith]

Тоже так сначала думал ответить, но нужно будет тогда позаботиться о том чтоб у класса был конструктор, который принимает объект и выставляет нужные поля.

В этом случае проще сделать интерфейс вместо класса и какой-нибудь метод а-ля

function createNameSurNameObject(data: Partial<NameSurName>): NameSurName {
  return {
    name: '',
    surename: 'Иванов',
    ...data
  }
}

[Антон Швец]

this.http.get('api/namesurname')
.pipe(
    map(({data}) => new NameSurName(data)),
}

nameSurName не является массивом

[Pavel Pikat]

Demian Smith, не понимаю чем вам так классы не угодили. вы создаете функцию непонятно где, которую при рефакторинге интрефейса нужно будет не забыть изменить, да еще и ручками все поля проставляете
Если вы посмотрите на мой пример то все поля проставляются одной сторочкой кода

[Demian Smith]

Pavel Pikat, сорри, не заметил конструктор.

Answer 2

[Demian Smith]

Только ручками, тайпскрипт за вас это чинить не будет.

// Класс здесь не нужен. Старайтесь предпочитать интерфейсы классам если у объекта нет методов
export interface NameSurName {
  name: string;
  surname: string;
}

...

this.nameSurName = {
  name: '',
  surename: 'Иванов',
  ...resp.data
}

На вопрос "почему так" ответ: тайпскрит не добавляет в код никакой магии. Конечный код скомпилированный из тайпскрипта выглядет в JS почти так же как и с тайпскриптом, только без типов. Короче, TS не занимается преобразованием типов за вас.

Вот есть официальный playground от создателей. Можно ради интереса иногда попроверять что получится из вашего TS кода.