Strongly typing props of vue components using composition api and typescript typing system
Troy Kessier's answer is not entirely accurate. I quote the documentation on definecomponent
:
Alternatively if your component does not use any option other than setup itself, you can pass the function directly […]
So there are not two ways of declaring properties, but rather two ways of declaring a component, and each of them provides its own way of typing props.
With the classic way and TypeScript, use PropType
:
import { defineComponent, PropType } from 'vue'export default defineComponent({ props: { someOptionalString: String, someRequiredString: { type: String, required: true }, someObject: { type: Object as PropType<MyObjectType>, required: true }, }, // …})
Notice: PropType
helps to give a correct TypeScript type to the props
parameter in the setup
function. But the underlying Vue type for the props remains Object
and there is currently no way to enforce a better typing for these props passed by the parent component.
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 }})