选项式 API_为计算属性标记类型

计算属性会自动根据其返回值来推导其类型

xxxxxxxxxx
<template>
    <p>{{ getHello }}</p>
</template>
<script lang="ts">

import { defineComponent } from "vue"

export default defineComponent({
    data() {
        return{
            message:"Hello"
        }
    },
    computed: {
        getHello(){
            return this.message + "!"
        }
    }
})

</script>

在某些场景中，你可能想要显式地标记出计算属性的类型以确保其实现是正确的

xxxxxxxxxx
<template>
    <p>{{ getHello }}</p>
    <p>{{ getHelloChange }}</p>
    <p>{{ getMessage }}</p>
</template>
<script lang="ts">

import { defineComponent } from "vue"

export default defineComponent({
    data() {
        return{
            message:"Hello"
        }
    },
    computed: {
        getHello():string{
            return this.message + "!"
        },
        getHelloChange:{
            get():string{
                return this.message+"!"
            },
            set(newValue:string){
                this.message = this.message + newValue
            }
        },
        getMessage(){
            this.getHelloChange = "World"
        }
    }
})

</script>