typescript - Vue 3 PropType 看不到界面

Question

我使用 onMonted 钩子创建父组件 Product vue：

setup () {
    let data = reactive({
      product: {},
      productInfo: {},
      loaded: false,
      shippingDate: ''
    })

    onMounted(async () => {
      const product = await findProduct()
      data.productInfo = productInfo(product)
      data.product = product
      data.loaded = true
    })

    return { data }
  },

和子组件 ProductAttributes

props: {
    product: {
      type: Object as PropType<Product>,
      required: true
    }
  },
  setup (props) {
    const configurableOptions = ref([])
    const configurableChildren = ref([])

    onMounted(() => {
      configurableChildren.value = props.product.configurable_children
      //@ts-ignore
      configurableOptions.value = props.product.configurable_options.map((option: ConfigurableOptions) => {
        option.values = option.values.sort((a: ConfigurableOptionsValue, b: ConfigurableOptionsValue) => {
          return parseInt(a.value_index) - parseInt(b.value_index)
        })
        return option
      })

      // resetAttrs()
    })

    return {
      configurableChildren,
      configurableOptions
    }
  }

但是在这种情况下，打字稿向我显示一个错误Property 'configurable_children' does not exist on type 'unknown'.但是如果我将设置功能道具更改为setup (props: { product: Product }) {并将道具更改为props: ['product']打字稿停止显示错误。

为什么会这样？为什么 typescript 不从 PropType 中提取类型？

PS我使用defineComponent

标签： typescriptvue.jsvuejs3

Answer 1

对于Property 'x' does not exist on type 'unknown'在这种情况下遇到错误的其他人，我可以通过将我的打字稿版本从升级4.1.5到4.5.5.