Vue 3 — установка типа компонента и его реквизита при использовании в качестве параметров функции
В Vue 3 я создаю функцию, которая будет принимать экземпляр компонента и реквизиты для прохождения. Я также использую TypeScript, и мне было интересно, могу ли я ввести эти параметры. Например, функция будет выглядеть примерно так:
const example = (component, props) => {
//
};
Итак, мои вопросы будут такими:
- Как указать тип экземпляра компонента? Это не всегда будет один и тот же компонент, но, по крайней мере, это будут компоненты, используемые для аналогичной цели.
- Будет ли у меня способ указать тип реквизита и ограничить его реквизитами, которые будут для первого параметра (компонента)?
Спасибо. Что касается второго вопроса, контекст заключается в том, что я перебираю некоторые объекты и собираюсь передать значение компонента в компонент «Компонент». Что-то вроде <Component :is = "component" v-bind = "props"/>. Итак, для этой функции я хотел бы создать тип props, чтобы они были свойствами, определенными для соответствующего компонента. Идея заключалась бы в том, чтобы обеспечить передачу ожидаемых реквизитов и, в идеале, получить некоторый намек на тип. Надеюсь, это имеет смысл.
Очень интересный вопрос, мне нравится, пробую код, надеюсь найду решение
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете использовать многие функции, предоставляемые машинописным текстом, и тип Component из vue, чтобы добиться правильной типизации, создать общий тип, который расширяет Component, затем выводит параметры/реквизиты компонента с помощью infer, используйте Partial, чтобы сделать их необязательными:
import type { Component } from "vue";
function example<T extends Component>
(Comp: T, props: T extends Component<infer P> ? Partial<P> : never) {
//....
}
example(Alert, { variant: "success"})
Примечание. Это также подразумевает атрибуты и утилиты экземпляра компонента.
Потрясающе, спасибо! Да, я не был знаком с infer и его использованием, так что мне тоже есть о чем почитать.
Для первого вопроса вы можете импортировать свой компонент, а затем использовать его как тип:
(component: typeof YourComponent, props) => {}. Я не очень понимаю ваш второй вопрос