Here is a simple example to illustrate my question
When I directly define my props inside the component, everything works fine
<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>
However, if I move the prop definition outside, it causes issues with TypeScript types
https://i.sstatic.net/MhuXs.png
<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>
I am looking for a way to share these prop type definitions across multiple Vue components without compromising TypeScript