Пользовательское объединение типов - что это и как можно использовать
Помимо объединения примитивных типов данных (например):
… в TypeScript можно делать и объединение пользовательских типов данных:
Более того, пользовательские типы можно связать между собой при помощи общего для всех типов поля:
… здесь поле type - является таким связующим звеном; такое поле называется дискриминантом.
Прелесть такого объединения типов заключается в том, что можно проверять значение этого поля и в зависимости от результата - выполнять нужное действие. Например, можно создать такую функцию calcArea:
… и тогда пример использования этой функции и объединенного типа будет таким:
Классы против интерфейсов в TypeScript - когда использовать, преимущества и недостатки
Классы
В TypeScript можно использовать классы для создании пользовательских типов данных. Например, так:
Однако, это не совсем правильный пример.
Преимуществом при использовании класса является тот факт, что можно создавать экземпляры этого класса:
Еще одно преимущество использования класса в TypeScript - возможность использования оператора instanceof:
… в этом случае условие выполнится и проверка сработает, так как person является экземпляром класса Person.
Недостаток использования класса в TypeScript - при транспиляции в JavaScript в результирующем коде останется этот класс - или ввиде функции (ES5):
… или ввиде класса (ES6):
Интерфейсы
Главное преимущество использования интерфейса в TypeScript - то, что в скомпилированном JS-коде не остается следов использования интерфейса; результирующий код - не утяжеляется:
… однако, использовать оператор instanceof в данном случае уже не получится - будет ошибка ‘Person’ only refers to a type, but is being used as a value here.
Если кратко - есть const - для создания констант в приложении. Объявили константу и один раз присвоили ей значение - все, больше изменить значение константы не получится - на то она и константа:
… строка abc = ‘melon’ - будет с ошибкой - “Cannot assign to ‘abc’ because it is a constant”.
readonly - это аналог const, только - для полей объекта; объявили объект, указали у него свойство с readonly; один раз - присвоили этому полю значение - все, переприсвоить его уже не получится:
… последняя строка - person.name = ‘Mary’ - в ней TypeScript выдаст ошибку - “Cannot assign to ‘name’ because it is a read-only property”.
Поле объекта с квалификаторомreadonly - неизменяемое свойство объекта.
Для меня немного запутанная картина с именованными областями отображения и главное - с правильной настройкой. Нужно немного прояснить для себя.
Первое - настройка маршрутов. В ключе outlet указываем имя дополнительной области outlet - aux:
В шаблоне обозначаем разметку для дополнительной области отображения и указываем ее имя через атрибут name - какое указали и в маршрутах:
В навигации в директиве routerLink - добавляем конфигурационный объект с ключом outlets. Значение этого ключа - объект с ключами primary и aux; эти ключи - имена областей отрисовки outlets;
имя primary - это имя по умолчанию; имя aux - это то имя дополнительной области отображения, которое указали в маршруте.
Самое неочевидное - это значения этих ключей. Значения - это path, указанный в настройках маршрута - path: ‘home’, path: ‘chat’.