Учебник по деструктуризации объектов Typescript с помощью Angular

TypeScript поддерживает идею разбиения структуры объекта. То, что обычно требует написания нескольких строк кода, можно сделать одной строкой. Есть две основные формы деструктуризации: объектная и произвольная. В этой статье основное внимание уделяется деструктуризации объектов.

Начнем с интерфейса:

export interface Person {
  age: number;
}

Обычно мы просто передаем весь объект в функцию для управления некоторыми данными.

incrementAge( person: Person){
  person.age = person.age + 1;
}

Теперь представьте, что ваш класс Person был «очень большим и сложным», и вы просто хотели изменить одно свойство объекта.

export interface Person {
  name: string;
  street: string;
  car: boolean;
  age: number;
}

Мы хотим создать новую функцию для увеличения возраста людей. Здесь нас интересуют только два свойства.

happyBirthday( {age, car} ){
}

Демонстрация

Я собираюсь сделать простую форму для нашего интерфейса.

<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
    <label for="name">Name</label>
    <input name="name" ngModel required #first="ngModel">
    <br>
    <label for="age">Age</label>
    <input name="age" ngModel>
    <br>
    <label for="street">Street</label>
    <input name="street" ngModel>
    <br>
    <label for="car">Car</label>
    <input name="car" ngModel>
    <br>
    <button>Submit</button>
</form>
<p>Form value: {{ f.value | json }}</p>
<p>After submitting: {{item | json}}</p>

Когда нажимается кнопка «Отправить», я хочу вызвать функцию для увеличения возраста человека без передачи всего объекта.

onSubmit(f: NgForm) {
  //note you can see the entire object
  console.log(f.value);
  this.happyBirthday(f.value);
}
happyBirthday( { age, car } ){
  console.log(age + '' + car);
  this.item.age = Number(age) + 1;
  this.item.car = "red";
}

После отправки:

Вот репозиторий git.

Чтобы запустить в режиме разработки, откройте терминал и запустите:

ng serve — open

Чтобы построить для производства с AOT и treehaking:

ng build --prod --build-optimizer