Vue 3 道具验证以及 Typescript

Posted 2023-03-16

【中文标题】Vue 3 道具验证以及 Typescript

【英文标题】：Vue 3 props validation along with Typescript

【发布时间】：2021-10-25 19:28:24

【问题描述】：

我想用 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);
      ,
    ,
  ,
);

【参考方案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

【讨论】：

我会检查你链接的扩展。对于额外的提示，您可能适合 Typescript 输入，我从typescript.nuxtjs.org/cookbook/components 中获取了这个示例，它可能不是最新的。对于单字组件名称，我使用 Nuxt，因此组件是自动导入的，并在组件目录中以它们当前的文件夹为前缀。因此，没有覆盖本机组件的风险。感谢您的详细解答！