diff --git a/src/guide/typescript/composition-api.md b/src/guide/typescript/composition-api.md index a1e32b33ee..89300774ca 100644 --- a/src/guide/typescript/composition-api.md +++ b/src/guide/typescript/composition-api.md @@ -131,6 +131,49 @@ export default defineComponent({ }) ``` +### Complex prop types + +With type-based declaration, a prop can use a complex type much like any other type: + +```vue + +``` + +For runtime declaration, we can use the `PropType` utility type: + +```ts +import type { PropType } from 'vue' + +const props = defineProps({ + book: Object as PropType +}) +``` + +This works in much the same way if we're specifying the `props` option directly: + +```ts +import { defineComponent } from 'vue' +import type { PropType } from 'vue' + +export default defineComponent({ + props: { + book: Object as PropType + } +}) +``` + +The `props` option is more commonly used with the Options API, so you'll find more detailed examples in the guide to [TypeScript with Options API](/guide/typescript/options-api.html#typing-component-props). The techniques shown in those examples also apply to runtime declarations using `defineProps()`. + ## Typing Component Emits {#typing-component-emits} In `