Vue.js 中的静态道具验证

Question

在 Vue 中使用 props 验证时，它只在浏览器控制台的运行时间内显示错误。

但我想让 props 验证在静态代码分析阶段（linting）工作。

比如我使用了默认的Vue 2项目模板：

HelloWorld.vue 是具有 msg 属性的组件，它是必需的：

<template>
  <h1>Message: {{ msg }}</h1>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: {
      type: String,
      required: true,
    },
  },
};
</script>

App.vue 正在使用 HelloWorld 组件，但未指定 msg 属性。相反，它使用不存在的道具 something:

<template>
  <HelloWorld :something="somewhat" />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  components: {
    HelloWorld,
  },
};
</script>

我希望至少满足其中一些要求运行 npm run lint:

应该是Error: required "msg" prop not found
应该是Warning: unknown "something" prop has been used
此外，如果我将 String 以外的其他内容分配给 msg 道具，它应该说 Error: prop "msg" should be String, but received *NotString*

换句话说，我希望 Vue 模板是可 lintable 的，就像 React 中的 JSX 模板一样。

有什么方法可以在 Vue 2 或 Vue 3 中实现这一点？也许，一些 eslint 插件？

如果这可以使用 TypeScript 解决 - 那就太棒了。

Answer 1

解决这个问题的方法是使用 JSX (TSX)。

这是一个 Vue 3 示例：

HelloWorld.tsx:

import { defineComponent } from "vue";

export default defineComponent({
  name: "HelloWorld",
  props: {
    msg: {
      type: String,
      required: true,
    },
  },
  setup: (props) => () => <h1>{props.msg}</h1>,
});

App.tsx:

import { defineComponent } from "vue";
import HelloWorld from "./components/HelloWorld";

export default defineComponent({
  name: "App",
  render: () => <HelloWorld msg={"123"} />,
});

这是 Vue 2 示例存储库：https://github.com/Maxim-Mazurok/vue-2-tsx-example

和 Vue 3：https://github.com/Maxim-Mazurok/vue-3-tsx-example

Vue.js 中的静态道具验证

Static props validation in Vue.js

javascript

typescript

vue.js

vue-props