使用组合 API 和打字稿打字系统对 vue 组件进行强打字 [英] Strongly typing props of vue components using composition api and typescript typing system

问题描述

我正在使用带有打字稿的 vue 组合 API.

I am using vue composition api with typescript.

如何使用 typescript 类型系统对组件 props 进行强类型?

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

推荐答案

如官方 docs 您可以通过两种方式输入道具:

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

通过参数注释定义 arops

Define arops via argument annotation

import { defineComponent } from 'vue'

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

或者像这样

import { defineComponent } from 'vue'

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

这篇关于使用组合 API 和打字稿打字系统对 vue 组件进行强打字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！