日韩欧美国产精品免费一二-日韩欧美国产精品亚洲二区-日韩欧美国产精品专区-日韩欧美国产另-日韩欧美国产免费看-日韩欧美国产免费看清风阁

背景

這幾天寫代碼，遇到一個不確定的知識點：我在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
來源：稀土掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。