На этой странице предполагается, что вы уже прочитали обзор использования Vue с TypeScript
Обратите внимание
Хотя Vue поддерживает использование TypeScript с API-интерфейсом параметров, рекомендуется использовать Vue с TypeScript через API-интерфейс композиции, поскольку он предлагает более простой, более эффективный и более надежный вывод типов.
Ввод реквизитов компонента
Вывод типа для реквизита в API параметров требует обертывания компонента в defineComponent(). С его помощью Vue может определять типы реквизитов на основе параметра, принимая во внимание props дополнительные параметры, такие как required: true и :default
Однако props параметры среды выполнения поддерживают только использование функций-конструкторов в качестве типа свойства — невозможно указать сложные типы, такие как объекты с вложенными свойствами или сигнатуры вызовов функций.
Чтобы аннотировать сложные типы свойств, мы можем использовать PropTypeтип утилиты
# Предостережения
Если ваша версия TypeScript меньше 4.7, вам следует быть осторожным при использовании значений функций validator и default параметров prop — обязательно используйте функции стрелок
Это не позволяет TypeScript выводить тип thisвнутри этих функций, что, к сожалению, может привести к сбою вывода типа. Это было ограничение предыдущего дизайна, но теперь оно было улучшено в TypeScript 4.7
Component Emits
Мы можем объявить ожидаемый тип полезной нагрузки для создаваемого события, используя объектный синтаксис опции emits. Кроме того, все необъявленные исходящие события при вызове выдадут ошибку типа
Computed Properties
Вычисляемое свойство определяет свой тип на основе возвращаемого значения
В некоторых случаях вам может потребоваться явно аннотировать тип вычисляемого свойства, чтобы гарантировать правильность его реализации
Явные аннотации также могут потребоваться в некоторых крайних случаях, когда TypeScript не может определить тип вычисляемого свойства из-за циклов вывода
Обработчики событий
При работе с собственными событиями DOM может быть полезно правильно ввести аргумент, который мы передаем обработчику. Давайте посмотрим на этот пример
Без аннотации типа eventаргумент будет неявно иметь тип any. Это также приведет к ошибке TS, если "strict": true или "noImplicitAny": true используются в tsconfig.json. Поэтому рекомендуется явно аннотировать аргументы обработчиков событий. Кроме того, вам может потребоваться использовать утверждения типа при доступе к свойствам event
Расширение глобальных свойств
Некоторые плагины устанавливают глобально доступные свойства для всех экземпляров компонентов через файлы app.config.globalProperties. Например, мы можем установить его this.$http для получения данных или this.$translate для интернационализации. Чтобы это хорошо сочеталось с TypeScript, Vue предоставляет ComponentCustomProperties интерфейс, предназначенный для расширения с помощью расширения модуля TypeScript
Расширение пользовательских опций
Некоторые плагины, например vue-router, обеспечивают поддержку параметров пользовательских компонентов, таких как beforeRouteEnter
Без надлежащего расширения типа аргументы этого перехватчика будут неявно иметь anyтип. Мы можем расширить ComponentCustomOptions интерфейс для поддержки следующих пользовательских опций
Теперь beforeRouteEnter опция будет правильно напечатана. Обратите внимание, что это всего лишь пример: хорошо типизированные библиотеки vue-router должны автоматически выполнять эти дополнения в своих собственных определениях типов.
На размещение этого улучшения распространяются те же ограничения, что и на глобальные улучшения свойств.