在组合API中定义`defineEmit`并在我的可组合中进行正确的类型转换。

huangapple go评论66阅读模式
英文:

defineEmit in composition API and typecast it properly in my composable

问题

I define an emit in my <script setup lang="ts"> and I want to send that emit to my composable to actually do the emitting for me.

However, I do need to cast my received parameter to something (because any is obviously not very nice and unknown doesn't think emit is a function)

I have the below code:

export type EmitType = {
    'search': [value: string]
}

And I initialize the composable with something like this:

<script setup lang="ts">
const emit = defineEmits<EmitType>();

useComposable(emit);
</script>

I then use EmitType to cast my emit parameter

const useMyComposable(emit: EmitType) {
  emit('search', 'a string');
}

By doing the above my emit() in the composable gives the error:

This expression is not callable.
  Type 'EmitType' has no call signatures.

Which I understand because defineEmits most likely has a different type.

So in short my question is:
How can I properly define emit in my composable to be error-free, not use any as a type and have the proper intellisense?

英文:

I define an emit in my &lt;script setup lang=&quot;ts&quot;&gt; and I want to send that emit to my composable to actually do the emitting for me.

However, I do need to cast my received parameter to something (because any is obviously not very nice and unknown doesn't think emit is a function)

I have the below code:

export type EmitType = {
    &#39;search&#39;: [value: string]
}

And I initialize the composable with something like this:

&lt;script setup lang=&quot;ts&quot;&gt;
const emit = defineEmits&lt;EmitType&gt;();

useComposable(emit);
&lt;/script&gt;

I then use EmitType to cast my emit parameter

const useMyComposable(emit: EmitType) {
  emit(&#39;search&#39;, &#39;a string&#39;);
}

By doing the above my emit() in the composable gives the error:

This expression is not callable.
  Type &#39;EmitType&#39; has no call signatures.

Which I understand because defineEmits most likely has a different type.

So in short my question is:
How can I properly define emit in my composable to be error-free, not use any as a type and have the proper intellisense?

答案1

得分: 1

I think this should do the trick. As your typescript error said, your previous type was not callable. This is.

type EmitType = {
    (event: "search", value: string): void;
};

const emit = defineEmits<EmitType>();

const runEmit = (emit: EmitType) => {
    emit("search", "string");
};

edit:
See https://vuejs.org/guide/typescript/composition-api.html#typing-component-emits

英文:

I think this should do the trick. As your typescript error said, your previous type was not callable. This is.

type EmitType = {
    (event: &quot;search&quot;, value: string): void;
};

const emit = defineEmits&lt;EmitType&gt;();

const runEmit = (emit: EmitType) =&gt; {
    emit(&quot;search&quot;, &quot;string&quot;);
};

edit:
See https://vuejs.org/guide/typescript/composition-api.html#typing-component-emits

huangapple
  • 本文由 发表于 2023年6月8日 20:53:22
  • 转载请务必保留本文链接:https://go.coder-hub.com/76432061.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定