typescript Vue 3在Vue $emit和$event上键入脚本警告“对象可能为'null'”

beq87vna  于 2022-11-18  发布在  TypeScript
关注(0)|答案(4)|浏览(733)

如何消除Vue模板中的TS警告?

我使用Vue 3手册中提供的示例

<input 
   type="text"
   :value="title"
   @input="$emit('update:title', $event.target.value)"
>

注:这只是一个TS警告,其正常工作。

vdzxcuhz

vdzxcuhz1#

Mic Fung的帮助下我的解决方案。创建一个处理程序方法...
但我们需要打字...
第一个
我对问题根源的选择:https://github.com/vuejs/jsx-next/issues/234

9avjhtql

9avjhtql2#

尝试使用可选链接来处理空情况

$event?.target?.value 
// the two `?` do the following
// if $event is null, the output will be null
// if $event.target is null, the output will be null

// if $event.target.value is null, the output will be null
// only if $event.target.value has value, the output will contain value

已更新

如果您确认事件有目标并且目标有值,则可以使用!告诉typescript $event中必须有目标和值

$event!.target!.value
btqmn9zl

btqmn9zl3#

我试图弄清楚如何使用JSDoc(VS代码的标准JS Typescript)并在组件上的@change的inline属性中实现这一点。(因此不需要额外的函数),这是最终工作的结果:
如果您的浏览器没有自动跳转,请点击这里。
通过这种方式,您可以将www.example.com转换event.target为HTMLInputElement,该元素具有value属性。

krcsximq

krcsximq4#

如果你使用的是defineEmits,你可以使用HTMLInputElement["value"]输入$event.target.valuevalue,然后将其命名为as explained by the OP
它将是这样的:

<template>
  <input
    type="text"
    :value="title"
    @input="$emit('update:title', ($event.target as HTMLInputElement).value))"
  />
</template>

<script setup lang="ts">
const emit = defineEmits<{
  (e: "update:title", value: HTMLInputElement["value"]): HTMLInputElement["value"];
}>();
</script>

相关问题