分不清Boolean和boolean，我被同事diss了！

背景

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

但是大写的Bolean就没问题

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

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

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

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

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

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

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

Boolean和boolean

本质区别

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

Boolean 是 JavaScript 的构造函数

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

typeof Boolean; // "function"

boolean 是 TypeScript 的基本类型

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

typeof boolean; // ReferenceError: boolean is not defined

TS中作为类型的Boolean和boolean

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

export interface ActionProps {
checkStatus: Boolean

}
export interface RefundProps {
visible: boolean

}

但是，他们存在一些区别

boolean

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

//typescript
let isActive: boolean; // 只能是 true 或 false

isActive = true;       // 正确

isActive = false;      // 正确

isActive = new Boolean(true); // 错误，不能赋值为 Boolean 对象

Boolean

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

//typescript
let isActive: Boolean; // 类型是 Boolean 对象

isActive = new Boolean(false); // 正确，赋值为 Boolean 对象

isActive = true; // 正确，基本布尔值也可以兼容

关键区别

为什么尽量避免使用 Boolean ？

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

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 表示类型了

<script lang="ts" setup>


interface IProps {

    photoImages?: string[],

    isEdit?: boolean

}

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

})


</script>