Vue 3 道具验证以及 Typescript

Question

我想用 Nuxt、Typescript 和 composition-api 创建一个自定义的 Link 组件。 target 是一个可以采用预定义值的道具，如下所示。 如果我理解得很好，自定义 validator 函数可以在运行时检查 prop 类型，而 Typescript 类型只是静态的？

两者结合有用吗？

import { defineComponent } from '@nuxtjs/composition-api';

export default defineComponent({
  name: 'Link',
  props: {
    target: {
      type: String as () => '_self' | '_blank' | '_parent' | '_top',
      default: '_self',
      validator: (value: string) => {
        return ['_self', '_blank', '_parent', '_top'].includes(value);
      },
    },
  },
});

Answer 1

TypeScript 类型仅在构建时检查是正确的，validator()s 是运行时守卫。

Vue 和 TypeScript 的关系……很复杂。您之前可能使用过 React，<Link target="some_invalid_value"/> 会在没有太多额外配置的情况下引发 TypeScript 错误。在 Vue 中，我会说出现这样的错误（即在模板中获得 TS prop 验证）被认为是“新的”。

如果您可以让花哨的开发人员体验增强扩展发挥作用，那么使用 TypeScript 会更舒服。但请记住：

• TypeScript 道具验证非常实验性/不稳定
• 这些扩展只能在 VSCode 中工作，但如果你运行 npm run build，你可能不会出错（除非你使用 https://github.com/vuejs/vetur/tree/master/vti 之类的东西 - 这是 Vetur 的一个插件。它会报告与你相同的错误' d 在 VSCode 中查看“坏”文件时得到，但它会在 CI 的终端中执行此操作，如果看到错误，它可能会导致构建失败）。

但是，如果您希望其他人会在不同的地方使用您的 Link 组件 - 例如，如果您正在制作组件库 - 请考虑它可能用于：

• 没有 TypeScript 的项目
• 甚至不使用 webpack 并在原始 .html 文件中使用 Vue 的项目

这不会从您的 TypeScript 类型中受益，但可以从 validator() 中受益。

您能否检查您是否在另一个组件中使用了您的 Link 组件，然后在遇到 TypeScript 错误时传递 <Link target="some_invalid_value"/>？如果没有，您需要对这些扩展进行一些额外的配置（仅限 VSCode）：

• https://github.com/johnsoncodehk/volar
• https://github.com/znck/vue-developer-experience

---

一些额外的提示：

我注意到您使用的类型断言 (as) 是非标准的。好像 Vue 文档 https://v3.vuejs.org/guide/typescript-support.html#annotating-props 指导用户使用 as PropType

可能不要使用单个单词的组件名称。这是样式指南中的第一条规则，它被标记为“基本”： https://v3.vuejs.org/style-guide/#multi-word-component-names-essential