组件

import { defineComponent, PropType } from 'vue' interface User { firstName: string lastName: string } export default defineComponent({ name: 'YourComponent', props: { user: { type: Object as PropType<User>, required: true } }, data () { return { message: 'This is a message' } }, computed: { fullName (): string { return `${this.user.firstName} ${this.user.lastName}` } } }) 

import Vue, { PropOptions } from 'vue' interface User { firstName: string lastName: string } export default Vue.extend({ name: 'YourComponent', props: { user: { type: Object, required: true } as PropOptions<User> }, data () { return { message: 'This is a message' } }, computed: { fullName (): string { return `${this.user.firstName} ${this.user.lastName}` } } }) 

import { defineComponent, computed, ref } from '@vue/composition-api' interface User { firstName: string lastName: string } 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 } } }) 

import { Vue, Component, Prop } from 'vue-property-decorator' interface User { firstName: string lastName: string } @Component export default class YourComponent extends Vue { @Prop({ type: Object, required: true }) readonly user!: User message: string = 'This is a message' get fullName (): string { return `${this.user.firstName} ${this.user.lastName}` } }