Quasar+TypeScript组件传错Prop类型时如何触发错误提示？

问题场景 #

现有Quasar+TypeScript项目，按钮组件的size Prop限定可选值为'S' | 'M' | 'L'，但传入非法值（如"fdsfsdfR"）时无任何提示，需要实现编译时阻止错误代码或开发时即时报错。

组件原代码：

<template>
  <q-btn
    class="button"
    :label="label"
  />
</template>

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

defineProps({
  size: {
    type: String as PropType<'S' | 'M' | 'L'>,
    default: 'S',
    validator(value: string) {
      return ['S', 'M', 'L'].includes(value);
    },
  },
  label: {
    type: String,
    default: '',
  },
});
</script>

错误传参场景：

<template>
  <q-page class="row items-center justify-evenly">
    <TelepackButton
      label="Кнопка"
      size="fdsfsdfR"
    />
  </q-page>
</template>

<script setup lang="ts">
import TelepackButton from 'components/TelepackButton/TelepackButton.vue';
</script>

解决方案 #

1. 强化TypeScript编译时检查（核心） #

当前代码用了PropType但未充分发挥TS的类型约束能力，改用defineProps的泛型写法，让TS直接在编译阶段拦截非法值：

修改按钮组件的<script setup>：

<script setup lang="ts">
// 定义可复用的联合类型
type ButtonSize = 'S' | 'M' | 'L';

// 用泛型定义props，TS自动检查传入值类型
const props = defineProps<{
  size?: ButtonSize;
  label?: string;
}>()

// 单独设置默认值（泛型写法需用withDefaults）
withDefaults(props, {
  size: 'S',
  label: ''
})

// 开发环境运行时验证，抛出错误阻止组件渲染
if (import.meta.env.DEV) {
  const validSizes: ButtonSize[] = ['S', 'M', 'L'];
  if (!validSizes.includes(props.size as ButtonSize)) {
    console.error(`[TelepackButton] 非法size值：${props.size}，可选值为${validSizes.join(', ')}`);
    throw new Error(`[TelepackButton] 非法size值：${props.size}`);
  }
}
</script>

修改后，VS Code等编辑器会即时显示红色波浪线提示非法值，运行vue-tsc --noEmit命令也会直接报错，阻止错误代码编译。

2. 配置编译时强制检查 #

在package.json的scripts中添加类型检查命令，确保编译前自动拦截错误：

{
  "scripts": {
    "type-check": "vue-tsc --noEmit",
    "build": "npm run type-check && quasar build"
  }
}

执行npm run build时，若存在Prop类型错误，vue-tsc会先报错，终止编译流程。

3. 保留运行时验证（可选） #

若需要在浏览器控制台也看到明确提示，可保留原validator函数并增强：

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

type ButtonSize = 'S' | 'M' | 'L';

defineProps({
  size: {
    type: String as PropType<ButtonSize>,
    default: 'S',
    validator(value: string) {
      const validSizes: ButtonSize[] = ['S', 'M', 'L'];
      const isValid = validSizes.includes(value as ButtonSize);
      if (!isValid && import.meta.env.DEV) {
        console.error(`[TelepackButton] 非法size值：${value}，可选值为${validSizes.join(', ')}`);
      }
      return isValid;
    },
  },
  label: {
    type: String,
    default: '',
  },
});
</script>

注意：validator返回false时，Vue会在开发环境控制台输出警告，但不会阻止组件渲染；若要阻止渲染，可在validator中抛出错误（仅开发环境）。

关键说明 #

• 泛型写法的defineProps是Vue3+TS的推荐方式，类型约束更严格，编辑器提示更友好；
• 需确保项目已安装vue-tsc（执行npm install vue-tsc --save-dev）；
• 所有运行时提示需判断import.meta.env.DEV，避免生产环境输出冗余信息。

内容的提问来源于stack exchange，提问作者Bad_m