Как уже говорилось в нашей предыдущей статье Написание однофайловых компонентов в Typescript, есть два способа создания компонента в Vue и Typescript: с помощью vue-class-component или Vue.extend.
Если вы используете Vue в стандартном Javascript, опора может быть только «объектом», и вам нужно будет вручную проверить, что объект имеет определенные ключи во время выполнения, чтобы убедиться, что он правильный.
С Typescript вы действительно можете в полной мере воспользоваться статической типизацией Typescript с помощью свойства Vue «Object». Это обеспечивает полное автозаполнение свойств объекта и статическую проверку существования свойства во время компиляции.
Как ты это делаешь?
Просто преобразуйте Object в функцию, которая возвращает интерфейс, который вы хотите реализовать.
Почему это работает?
Когда вы передаете Object в качестве типа опоры в компонент Vue, вы фактически передаете конструктор объекта.
Чтобы проверить это свойство во время выполнения, Vue запускает код проверки, аналогичный тому, что указано выше, чтобы проверить, действительно ли это instanceof предоставленный тип.
Интерфейсы машинописного текста не существуют во время выполнения, поэтому следующее:
будет выглядеть так после компиляции в Javascript, отсюда и волнистая красная линия:
Приведение Object к вашему интерфейсу также не будет работать, поскольку ваш интерфейс не реализует методы, которые выполняет собственный конструктор Object.
Причина, по которой это работает:
это связано с тем, что типизация Vue Typescript внутренне обрабатывает любую функцию, переданную как «тип», как функцию, которая возвращает экземпляр интерфейса.
Это немного сбивает с толку, но, честно говоря, большинство вещей в жизни сбиваются с толку.
Есть ли способ лучше?
Существует открытый запрос на вытягивание, открывающий PropTypes интерфейс, который позволит вам преобразовать конструктор Object в сложный интерфейс, например:
props: {
testProp: Object as PropTypes<{ test: boolean }>
}
Но на данный момент единственный способ ввести сложные типы опор без использования vue-class-component - это привести объект как функцию, возвращающую интерфейс, например:
props: {
testProp: Object as () => { test: boolean }
}
