编译时未收到有关未指定接口对象类型的任何错误

Question

嗨，我正在测试 Vue 组合 API 和类型

当 interface 不符合为该接口指定的 types 时，我试图得到一个错误。

我成功实现了预期的 interface/types，并且我从我的 IDE 中获得了自动建议，因此它看起来有效，但在编译时我没有收到任何错误尝试将 number 传递给 string 类型时。

这里我提供一个简单的例子

Vue 文件：

<template>
  <div class="flex flex-col">
    <h1 class="flex justify-center">Test View</h1>
    <TestComponent
      :dataset="{
        strCustomerName: 12345,
      }"
    />
  </div>
</template>
<script setup lang="ts">
import TestComponent from "@/components/TestComponent.vue";
</script>

这个 Vue 文件只是导入一个组件并随它发送一个名为数据集的对象。

测试组件

<template>
  <h1 class="text-9x1 flex">Hello {{ props.dataset.strCustomerName }}</h1>
</template>

<script setup lang="ts">
import { defineProps } from "vue";

type FormType = {
  strCustomerName: string;
};

interface FormProperties {
  dataset: {
    type: FormType;
    required: true;
  };
}

const props = defineProps<FormProperties>();

console.log("We are props: ", props.dataset);
</script>

然后使用这个测试组件，我试图告诉 Vue 我希望数据集对象作为 FormProperties 中的 属性 传递，然后我试图告诉 Vue我想要那个对象的某个结构，它是 FormType 上面示例中的问题是 strCustomerName 被设置为 string 但是当我传递 number 它直接通过，没有任何错误。如果我想像这样使用视图文件，我什至可以传递一个不存在的密钥：

<template>
  <div class="flex flex-col">
    <h1 class="flex justify-center">Test View</h1>
    <TestComponent
      :dataset="{
        strCustomerHasAName: 'please give me an error'
      }"
    />
  </div>
</template>
<script setup lang="ts">
import TestComponent from "@/components/TestComponent.vue";
</script>

所以基本上为什么我在传递错误的类型时没有收到错误消息？或未在 FormType 对象中定义的键？

这是正常行为还是我真的可以做些什么？

Answer 1

使用defineProps

defineProps 的类型注释声明了每个道具的实际类型，因此在您的情况下，defineProps<FormProperties>() 告诉 Vue 创建一个名为 dataset 的道具，它有两个字段：

• type，它的类型是FormType，它有一个strCustomerName 属性，它是一个string。

• required，类型为true（即只能为true，任何其他值都会出错）。

看起来您实际上是在尝试使用选项语法来声明道具，但必须作为 函数参数 到 defineProps:

import type { PropType } from 'vue'

defineProps({
  dataset: {
    type: Object as PropType<FormType>,
    required: true,
  }
})

或者，如果您更愿意使用类型注释，则需要更新 FormProperties:

type FormType = {
  strCustomerName: string;
};

interface FormProperties {
  dataset: FormType;
}

defineProps<FormProperties>();

你不能把两者混为一谈。 defineProps 接收 类型注释， 或 函数参数，不能同时接收。

检测错误

如果您使用 Volar（Vue 的官方 VS 代码扩展），您会看到原始代码的错误：

或者如果您使用 vue-tsc 进行类型检查，您会在控制台中看到错误：

$ vue-tsc --noEmit
src/components/MyComponent.vue:2:52 - error TS2339: Property 'strCustomerName' does not exist on type '{ type: FormType; required: true; }'.

2   <h1 class="text-9x1 flex">Hello {{ props.dataset.strCustomerName }}</h1>
                                                     ~~~~~~~~~~~~~~~


Found 1 error in src/components/MyComponent.vue:2