Vue 3 Composition API Typescript Component Props

file.ts

import { defineComponent, computed, ref } from '@vue/composition-api'

interface User {
  firstName: string
  lastName: number
}

export default defineComponent({
  props: {
    user: {
      type: Object as () => User,
      required: true
    }
  },

  setup ({ user }) {
    const fullName = computed(() => `${user.firstName} ${user.lastName}`)
    const message = ref('This is a message')

    return {
      fullName,
      message
    }
  }
})

Wow! Thanks for this tip! 👍

error Destructuring the props will cause the value to lose reactivity

Yes, that's right! But the typecasting of the prop still works even if you don't destructure the props in setup()~

FYI, for folks who want to know the rule - https://eslint.vuejs.org/rules/no-setup-props-destructure.html