本文主要是介绍【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.isDisabledconst buttonLabelStringTypeProps = props.buttonLabelreturn {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>
这篇关于【Vue3+Typescript】报错：类型 boolean 不可分配给类型 Boolean的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
