Javascript 如何通过Vue.extend（）在TypeScript中共享Vue组件属性定义？

请看这个最小的例子

如果我直接在组件内部编写道具，一切都很好

<script lang="ts">
import Vue, { PropType } from "vue";
export default Vue.extend({
  props: {
    colorType: {
      default: "primary" as const,
      type: String as PropType<"primary" | "secondary" | "other">,
      validator: (value) => ["primary", "secondary", "other"].includes(value),
    },
  },
});
</script>

从“Vue”导入Vue，{PropType}；
导出默认Vue.extend({
道具：{
颜色类型：{
默认值：常量为“primary”，
类型：字符串作为PropType，
验证器：（值）=>[“主要”、“次要”、“其他”]。包括（值），
},
},
});

但是，如果我在外部提取props定义，它将破坏类型

从“Vue”导入Vue，{PropType}；
常量颜色类型={
默认值：常量为“primary”，
类型：字符串作为PropType，
验证器：（值）=>[“主要”、“次要”、“其他”]。包括（值），
};
导出默认Vue.extend({
道具：{
颜色类型，
},
});

如何在不破坏TypeScript的情况下共享这些道具类型定义accross Vue组件？

const colorType={
默认值：“主”为常量，
类型：字符串，
验证器：（值）=>[“主要”、“次要”、“其他”]。包括（值），
}作为验证人；

我认为这是可行的

const colorType={
默认值：“主”为常量，
类型：字符串，
验证器：（值）=>[“主要”、“次要”、“其他”]。包括（值），
}作为验证人；

---

我认为这是可行的

注意：

从'vue/types/options'导入{PropValidator}谢谢！这就是疯狂的打字技巧。注意：
import{PropValidator}来自'vue/types/options'谢谢！那是疯狂的打字技巧。
<script lang="ts">
import Vue, { PropType } from "vue";

const colorType = {
  default: "primary" as const,
  type: String as PropType<"primary" | "secondary" | "other">,
  validator: (value) => ["primary", "secondary", "other"].includes(value),
};

export default Vue.extend({
  props: {
    colorType,
  },
});
</script>