Неизменяемость компонента и RequiredArray

При изучении проектирования компонентов один из рекомендуемых советов - никогда не изменять входные свойства.

Давайте рассмотрим пример ниже. (Я использую Angular, но то же самое может быть применимо и к другим фреймворкам).

@Component({…})
class MyComponent {

  @Input() status: Status[];

   get sortedStatus() {
     return this.status.sort();
   }
}

Здесь sort является изменяемой операцией. Она не только сортирует массив, но и изменяет его.

Я подготовил [stackblitz](https://angular-njd2pq.stackblitz.io/ ). Здесь у нас есть массив status типа string. Он передается в дочерний компонент. Он отображается как в родительском, так и в дочернем компоненте. В дочернем компоненте у меня есть кнопка Sort Array, которая в основном сортирует `статус`, полученный через ` @Input()`.

Сортировка массива из дочернего компонента сортирует массив и он отражается в родительском компоненте.

Мы можем предотвратить такое поведение, используя **ReadonlyArray**.

Этот интерфейс убирает все изменяемые операции, такие как _push, pop, shift, unshift_, а также _sort_.