Strongly typing props of vue components using composition api and typescript typing system

Question

I am using vue composition api with typescript.

How can I strongly type the component props using typescript typing system?

Answer 1

As explained in the official docs you can type props in two ways:

Define arops via argument annotation

import { defineComponent } from 'vue'

export default defineComponent((props: { foo: string }) => {
  props.foo
})

Or like this

import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    foo: String
  },
  setup(props) {
    props.foo // <- type: string
  }
})