【Vue3+Typescript】报错：类型 boolean 不可分配给类型 Boolean

Vue3的组件【<button/>】参数是Boolean对象类型,Props的参数类型也是【Boolean对象类型】但是经过Typescript转换之后则变成了boolean简单类型,为此需要手动转换才可以正常使用！

报错代码： 

<script lang="ts">
import { defineComponent } from "vue"

export default defineComponent({
	name: "MyButton",
	props: {
		buttonLabel: {
			type: String,
			required: true
		},
		isDisabled: {
			type: Boolean,
			required: true
		}
	},
})
</script>

<template>
	<div class="greetings">
		<!--这里如果使用props中的isDisabled的值会报错【因为isDisabled这里是一个boolean简单类型】-->
		<button :disabled="isDisabled">ok</button>
		<input :placeholder="buttonLabel" />
	</div>
</template>

<style scoped>
.greetings {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

button {
	padding: 10px 20px;
	font-size: 16px;
	cursor: pointer;
}

button:disabled {
	background-color: grey;
	cursor: not-allowed;
}
</style>

正确解决方案案例：

<script lang="ts">
import { defineComponent } from "vue"

export default defineComponent({
	name: "MyButton",
	props: {
		buttonLabel: {
			type: String,
			required: true
		},
		isDisabled: {
			type: Boolean,
			required: true
		}
	},
	setup(props) {
		/**
		 * 1、由于按钮button的属性【:disabled="disabledButtonProps"】其中属性disabled为Vue3的Boolean类型！
		 * 2、这里copy一份Boolean类型的参数向外部暴露,避免使用直接转换成了boolean类型的值！
		 * 3、props中的参数本来就是一个响应式类型的值，所以不需要再次使用ref进行包装！
		 */
		const isDisabledBooleanTypeProps = props.isDisabled
		const buttonLabelStringTypeProps = props.buttonLabel

		return {
			isDisabledBooleanTypeProps,
			buttonLabelStringTypeProps
		}
	}
})
</script>

<template>
	<div class="greetings">
		<!--这里如果使用props中的isDisabled的值会报错【因为isDisabled这里是一个boolean简单类型】-->
		<button :disabled="isDisabledBooleanTypeProps">{{ a }}</button>
		<input :placeholder="buttonLabelStringTypeProps" />
	</div>
</template>

<style scoped>
.greetings {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

button {
	padding: 10px 20px;
	font-size: 16px;
	cursor: pointer;
}

button:disabled {
	background-color: grey;
	cursor: not-allowed;
}
</style>