背景

这几天写代码，遇到一个不确定的知识点：我在vue的props中如何给一个属性定义小写的bolean，代码就会报错

但是大写的Bolean就没问题

由于我在其他地方我看大小写都可以，有点疑惑，于是想去请教一下同事。然而，没想到同事上来就diss我：

这么基础的知识你都不清楚？这两个根本就不是一个东西！

我有点不开心，想反驳一下：

这两个不都是描述类型的东西吗？我给你看其他地方的代码，这两个都是可以混用的！

同事有点不耐烦，说道：大姐，boolean是TS中的类型声明，Boolean是JavaScript 的构造函数，根本不是一个东西吧！

行吧，我也刚入门不久，确实不了解这个东西，只能强忍委屈，对同事说了声谢谢，我知道了！

然后，我好好的学习了一下Boolean和boolean的知识，终于搞明白他们的区别了。

Boolean和boolean

本质区别

同事说的很对，他们两个的本质区别就是一个是JavaScript语法，一个是TypeScript语法，这意味着非TypeScript项目是不存在boolean这个东西的。

Boolean 是 JavaScript 的构造函数

Boolean 是 JavaScript 中的内置构造函数，用于布尔值的类型转换或创建布尔对象。

js
typeof Boolean; // "function"

boolean 是 TypeScript 的基本类型

• 如果使用了 TypeScript，boolean 是 TypeScript 中的基本类型，用于静态类型检查。
• 在 JavaScript 的运行时上下文中，boolean 并不存在，仅作为 TypeScript 的静态检查标识。

js
typeof boolean; // ReferenceError: boolean is not defined

TS中作为类型的Boolean和boolean

在TypeScript中，Boolean和boolean都可以用于表示布尔类型

js
export interface ActionProps {
	checkStatus: Boolean
}
export interface RefundProps {
	visible: boolean
}

但是，他们存在一些区别

boolean

• boolean 是 TypeScript 的基本类型，用于定义布尔值。
• 它只能表示 true 或 false。
• 编译后 boolean 不会存在于 JavaScript 中，因为它仅用于静态类型检查。

js
//typescript
let isActive: boolean; // 只能是 true 或 false
isActive = true;       // 正确
isActive = false;      // 正确
isActive = new Boolean(true); // 错误，不能赋值为 Boolean 对象

Boolean

• Boolean 是 JavaScript 的内置构造函数，用于将值显式转换为布尔值或创建布尔对象（Boolean 对象）。
• 它是一个引用类型，返回的是一个布尔对象，而不是基本的布尔值。
• 在 TypeScript 中， Boolean 表示构造函数类型，而不是基本的布尔值类型。
• 
  

js
//typescript
let isActive: Boolean; // 类型是 Boolean 对象
isActive = new Boolean(false); // 正确，赋值为 Boolean 对象
isActive = true; // 正确，基本布尔值也可以兼容

关键区别

特性	boolean	Boolean
定义	TypeScript 的基本类型	JavaScript 的构造函数
值类型	只能是 true或 false	是一个布尔对象
推荐使用场景	用于定义基本布尔值类型	很少用，除非需要显式构造布尔对象
运行时行为	不存在，只在编译时有效	在运行时是 JavaScript 的构造函数
性能	高效，直接操作布尔值	对象包装，性能较差

为什么尽量避免使用 Boolean ？

类型行为不一致：Boolean 是对象类型，而不是基本值类型。这会在逻辑运算中导致混淆：

js
const flag: Boolean = new Boolean(false);
if (flag) {
  console.log("This will run!"); // 因为对象始终为 truthy
}

性能开销更大：Boolean 会创建对象，而 boolean 是直接操作基本类型。

vue中的Boolean与boolean

Vue 的运行时框架无法识别 boolean 类型，它依赖的是 JavaScript 的内置构造函数（如 Boolean、String、Number 等）来检查和处理 props 类型。

因此，props的Type只能是Boolean、String或Number。

但是如果vue中开启了ts语法，就可以使用boolean 表示类型了

js
<script lang="ts" setup>
  
interface IProps {
    photoImages?: string[],
    isEdit?: boolean
}

const props = withDefaults(defineProps<IProps>(), {
    photoImages: () => [],
    isEdit: true
})

</script>

作者：快乐就是哈哈哈
链接：https://juejin.cn/post/7439576043223203892
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。