How to share Vue Component Prop Definition in TypeScript throght Vue.extend()?

Question

Please see this minimum example

If I write my props directly inside the component, everything is 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 extract the props definition outside, it will break types

<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>

How can I share those prop type definition accross Vue components without breaking TypeScript?

Tipwheal · Accepted Answer · 2020-07-24 05:42:04Z

2

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

I think this works

answered Jul 24, 2020 at 5:42

Tipwheal

3784 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Joseph Over a year ago

Note: import { PropValidator } from 'vue/types/options';

Joseph Over a year ago

Thank you! That's insane TypeScript skills right there.

Collectives™ on Stack Overflow

How to share Vue Component Prop Definition in TypeScript throght Vue.extend()?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related