не получается задать свойство элемента html Angular

Question

Я изучаю Angular по учебному проекту, проект вроде и 2020, но ни чего не работает. У меня стоит 11 версия, в учебнике используется 9. В учебнике определяется переменная, которая меняет свойство html элемента, при создании задаю начальное значение:

menuMode = 'push';

а вот тут передаю ее в html

<ng-sidebar
    [mode]="menuMode"
>

Компилятор выдает ошибку:

error TS2322: Type 'string' is not assignable to type '"over" | "push" | "slide"'.

Если переменную объявить так:

menuMode: 'over' | 'push' | 'slide';

то компилятор пропускает, но это как-то не правильно, а если завтра появится еще одно свойство

Answer 1

Первый вариант не true-way - обозначить как any

menuMode = 'push' as any;

Использование any очень плохая практика, не рекомендуется к использованию.

Второй вариант - вывести отдельный тип:

type MenuMode = 'over' | 'push' | 'slide';
menuMode: MenuMode = 'push'; // соответствует записи menuMode: 'over' | 'push' | 'slide';

При использовании type MenuMode, если добавится еще одно значение, то нужно будет его добавить только в объявление типа type MenuMode = 'over' | 'push' | ...;

Также нужно учитывать, что если изначальный тип не Ваш, а например из библиотеки и вы не можете его получить напрямую через import. То Ваш type MenuMode должен быть таким же как нужный тип данных или меньше. То есть:

Начальный тип 'over' | 'push' | 'slide';
type MenuMode = 'over' | 'push' | 'slide'; // будет работать
type MenuMode2 = 'over' | 'push'; // будет работать
type MenuMode3 = 'over' | 'push' | 'slide' | 'leave' ; // НЕ будет работать

Третий вариант - вывести отдельный тип и объявить переменную как тип:

type MenuMode = 'over' | 'push' | 'slide';
menuMode = 'over' as MenuMode;

Конструкция as MenuMode не очень желательна при использовании в коде, может являться причиной багов в runtime.

БЛОГ НА HUSL

не получается задать свойство элемента html Angular

Ответы (1 шт):