javascript - Extracting props to separate module in Vue composition API in typescript

Question

I am trying to port some old code from Vue options API + JS to Vue composition API + TS and I have the following mixin:

export default {
  props: {
    time: {
      default: 1,
      type: String | Number,
    },
    iterations: {
      default: 1,
      type: String | Number,
    },
  },
  data: () => ({
    animation: '',
  }),
  methods: {
    animate() {
      this.animation = `move ${this.time}s ease-in-out ${this.iterations} forwards`
    },
  },
}

Now I am having some trouble to find the right way to type the props while at the same time preserving the default values and the reactivity. In this one for example the default values get lost:

export default (props: {
  time: string | number
  iterations: string | number
}) => {
  const animation = ref('')
  const animate = () => {
    animation.value = `move ${props.time}s ease-in-out ${props.iterations} forwards`
  }
  return {
    animation,
    animate,
  }
}

Whereas here I lose the reactivity since I destructure the props param:

export default ({
  time = 1,
  iterations = 1,
}: {
  time: string | number
  iterations: string | number
}) => {
  const animation = ref('')
  const animate = () => {
    animation.value = `move ${time}s ease-in-out ${iterations} forwards`
  }
  return {
    animation,
    animate,
  }
}

How can I fix that?

question from:https://stackoverflow.com/questions/66067984/extracting-props-to-separate-module-in-vue-composition-api-in-typescript

Answer 1

I will go for the second solution and add an export for the props object

export const moduleProps {
  time: {
    default: 1,
    type: [String, Number],
  },
  iterations: {
    default: 1,
    type: [String, Number],
  },
}

A bit redundant but it works