Vue 3- Composition - Typescript发射的->类型

Question

我第一次使用Typescript开始使用VUE 3和组合api。我有如下的设置方法：setup(props: { widgetType: string; displayType: string; trigger: number }, { emit })现在，当我构建这个文件时，我得到错误“绑定元素'emit‘隐式具有'any’类型。”我不知道如何解决这个问题。我尝试了网络上的不同解决方案，但都不起作用。有人能帮我吗？致敬Chris

Answer 1

您需要使用defineComponent方法定义组件，并将正确的类型应用于props。如果您使用的是单个文件组件，则如下所示

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    props: {
        widgetType: {
            type: String,
            required: true
        },
        displayType: {
            type: String,
            required: true
        },
        trigger: {
            type: number,
            required: true
        }
    },

    setup(props, { emit }) {

        // Rest of your setup code here
    }
});
</script>

Answer 2

例如，使用组件"App“和可组合的"useModal”正确键入

应用程序：

<script lang="ts"> 
 import {defineComponent, SetupContext, ComponentPropsOptions} from 'vue';
 import {useModal} from '@/composable/useModal';
                    
 export default defineComponent({
   name: 'App',
   setup(props: ComponentPropsOptions, {emit}: SetupContext) {
     const openModal = useModal({emit});
                    
     return {openModal};
   }
});
</script>

useModal：

import {SetupContext} from 'vue';

interface UseModalProps {
  emit: SetupContext['emit'];
}

export function useModal({emit}: UseModalProps) {
  function openModal({title, type}: {title: string; type: string}): void {
    emit('openModal', {title, type});
  }

  return {openModal};
}

Answer 3

要进行快速修复，您可以执行以下操作：

setup(props: { widgetType: string; displayType: string; trigger: number }, { emit }: { emit: Function | (eventName: string, payload: any) => void })

但我建议您使用整个组件更新您的问题，以便我们能够了解问题的根本原因