以下是原文翻译成繁體中文的版本：

# TypeScript - Boxing 和 Unboxing

你好，未來的編程超級巨星！今天，我們將深入TypeScript中的一個令人興奮的主題：Boxing（封裝）和Unboxing（解封）。別擔心這些術語聽起來像是來自拳擊場的東西 – 我保證這個過程遠比拳擊柔和，而且更有趣！讓我們一起開始這場冒險吧。

## Boxing 和 Unboxing 是什麼？

在我們深入TypeScript的細節之前，讓我們先了解在編程中封裝和解封意味著什麼。

想像你有一輛小玩具車。現在，如果你想在移動時保護它，你可能会把它放在一個盒子里。這在編程中基本上就是封裝 – 將一個簡單的值包在一個對象中。

解封，正如你可能猜到的，是相反的過程。這就像把玩具車從盒子里拿出來玩耍。

現在，讓我們看看這在TypeScript中是如何應用的！

## TypeScript中的封裝

在TypeScript中，封裝發生在我們將一個原始值（如數字或字符串）轉換為對象時。這可能聽起來有點奇怪 – 我們為什麼要讓事情變得更複雜？嗯，有時我們需要將這些簡單的值當作對象來使用某些方法或屬性。

讓我們看一些例子：

```typescript
// 封裝一個數字
let myNumber = 42;
let boxedNumber = new Number(myNumber);

console.log(typeof myNumber);    // 輸出: "number"
console.log(typeof boxedNumber); // 輸出: "object"

在這個例子中，我們將我們的簡單數字 42 封裝進一個 Number 對象中。注意 typeof 運算符對每個變量顯示的結果是不同的。

這裡有另一個使用字符串的例子：

// 封裝一個字符串
let myString = "Hello, TypeScript!";
let boxedString = new String(myString);

console.log(myString.toUpperCase());    // 輸出: "HELLO, TYPESCRIPT!"
console.log(boxedString.toUpperCase()); // 輸出: "HELLO, TYPESCRIPT!"

在這種情況下，myString 和 boxedString 都可以使用 toUpperCase() 方法。TypeScript 足夠智能，當我們在它們上面使用方法時，會自動封裝原始值，所以我們不必總是手動進行。

當封裝有用地？

封裝在當我們使用泛型或需要為我們的值添加附加屬性時特別有用。這裡有一個例子：

function logValue<T>(value: T): void {
    if (typeof value === "object") {
        console.log("對象值:", value);
    } else {
        let boxedValue = Object(value);
        console.log("封裝的原始值:", boxedValue);
    }
}

logValue(42);           // 輸出: 封裝的原始值: [Number: 42]
logValue("TypeScript"); // 輸出: 封裝的原始值: [String: 'TypeScript']
logValue({name: "TypeScript"}); // 輸出: 對象值: { name: 'TypeScript' }

在這個函數中，我們使用封裝來一致地將所有值當作對象處理。

TypeScript中的解封

現在我們已經把值放在盒子里了，我們怎麼把它們拿出來呢？這就是解封發揮作用的地方。解封是從對象包中提取原始值的过程。

在TypeScript中，解封通常在使用封裝值時自動發生，當期望一個原始值的上下文中，你也可以顯式地進行：

let boxedNumber = new Number(42);
let unboxedNumber = boxedNumber.valueOf();

console.log(typeof boxedNumber);  // 輸出: "object"
console.log(typeof unboxedNumber); // 輸出: "number"

在這裡，我們使用了 valueOf() 方法來顯式解封我們的數字。

讓我們再看一個使用字符串的例子：

let boxedString = new String("Hello, TypeScript!");
let unboxedString = boxedString.toString();

console.log(typeof boxedString);  // 輸出: "object"
console.log(typeof unboxedString); // 輸出: "string"

在這種情況下，我們使用了 toString() 來解封我們的字符串。

自動解封

TypeScript（和JavaScript）通常會在我們在某些上下文中使用它們時自動解封值。例如：

let boxedNumber = new Number(42);
let result = boxedNumber + 8;

console.log(result); // 輸出: 50
console.log(typeof result); // 輸出: "number"

即使 boxedNumber 是一個對象，當我們在數學運算中使用它時，TypeScript也會自動解封它。

封裝和解封方法

這裡是一個總結TypeScript中的常用封裝和解封方法的表格：

原始類型	封裝方法	解封方法
number	new Number()	valueOf()
string	new String()	toString()
boolean	new Boolean()	valueOf()

結論

好了，各位！我們已經解開了TypeScript中封裝和解封的神秘。記住，儘管這些概念很重要，但在日常TypeScript編程中，你不必經常手動封裝和解封值。TypeScript和JavaScript都非常擅長為您處理這些轉換。

在你繼續你的TypeScript之旅時，請記住，了解這些底層概念可以幫助你寫出更高效且無錯誤的代碼。這就像知道汽車引擎是如何工作的一樣 – 你不需要那種知識來開車，但在優化性能或診斷問題時，它肯定會有所幫助！

持續編程，持續學習，並記住 – 在編程的世界裡，跳脫思維的盒子是很好，但有時候思考盒子本身也同樣重要！

Credits: Image by storyset