Vetur，解构道具的类型推断有额外的未定义类型？

Question

使用以下代码，Vetur 推断出 x,y 具有类型 number | undefined。

undefined 会在进一步使用 x,y 时引发大量警告。

如何从类型推断中删除 undefined？

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: { x: Number, y: Number },
  setup(props) {
    let { x, y } = props
  },
})
</script>

Answer 1

默认情况下，所有 props 都是可选的（因为它可能是 undefined），因此您的 prop 被键入为 number | undefined。

您可以根据需要使用长形式的 prop 声明来声明 prop，这会从 prop 的类型中删除 | undefined：

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    x: {
      type: Number,
      required: true, //
    },
    y: {
      type: Number,
      required: true, //
    },
  },
  setup(props) {
    let { x, y } = props
  },
})
</script>

demo

顺便说一句，Vetur 已被弃用，Volar 是 Vue 3 和 TypeScript 官方支持的 VS Code 扩展，因此请考虑切换。

Vetur，解构道具的类型推断有额外的未定义类型？

Vetur, type inference of deconstructed props has extra undefined type?

typescript

vue.js

vuejs3