Как определить реквизит в vue3 (Typescript)


Как определить реквизит в vue3 (Typescript)

02.12.2020 03:29:02 Просмотров 47 Источник

В функции Vue3 по defineComponent, первый универсальный параметр-это реквизит, поэтому я указываю тип реквизита, используя вот машинописного текста интерфейса. любить:

export default defineComponent<{ initial?: number }>({
  setup(props) {
    const count = ref(props.initial ?? 0);
    const increase = () => count.value++;
    const decrease = () => count.value--;
    return { count, increase, decrease };
  }
});

Но мой реквизит не идентифицируется Vue, это означает, что приведенный ниже код не будет работать:

<Counter :initial="5"></Counter>

Если я определяю параметры реквизита в своих компонентах, например:

export default defineComponent<{ initial?: number }>({
  props: {
    initial: { type: Number, required: false },
  },
  setup(props) {
    const count = ref(props.initial ?? 0);
    const increase = () => count.value++;
    const decrease = () => count.value--;
    return { count, increase, decrease };
  }
});

это произойдет ошибка типа TS2769: No overload matches this call. И я знаю, что если я удалю общий параметр, то уберу эту ошибку, но параметры реквизита-это не родной Typescript.

Кто-нибудь знает, как я могу это решить?

У вопроса есть решение - Посмотреть?

Ответы - Как определить реквизит в vue3 (Typescript) / What's the way to define props in vue3 (Typescript)

Husam Ibrahim

02.12.2020 03:44:31

Props - это конструкция времени выполнения Vue, которая не может быть выведена из определений типов TypeScript (есть такие вещи, как значения по умолчанию, валидаторы и т. д., связанные с props). Вам придется определить их с помощью опции props, как и ожидает API. Чтобы обеспечить строгие определения типов для вашего реквизита, используйте PropType для аннотирования вашего реквизита.

Помочь в развитии проекта:
Закрыть X