TypeScript - 裝箱與拆箱

TypeScript 中的值型別透過稱為裝箱的過程自動轉換為引用型別。換句話說，裝箱是指將值型別轉換為引用型別，而拆箱是指將引用型別轉換為值型別。這兩種技術用於 TypeScript 中將值型別轉換為物件型別。

裝箱是將值型別包裝在物件型別中的過程。相反，拆箱是將物件型別解包回值型別。這兩種技術透過減少每次將值型別強制轉換為物件型別時分配的記憶體量來提高程式碼效能。

TypeScript 中的裝箱和拆箱指的是在將基本值傳遞給函式或從函式返回時處理它們的方式。當基本值傳遞給函式時，它會被裝箱，這意味著它會被轉換為物件。當值從函式返回時，物件會被拆箱，並且會返回基本值。此過程是必要的，因為基本值不是面向物件的，必須進行轉換才能讓函式對其進行操作。裝箱和拆箱可以提高 TypeScript 應用程式的效能和記憶體使用率。

讓我們詳細逐一解釋這兩個主題。

TypeScript 中的裝箱

TypeScript 中的裝箱是指將基本資料型別（例如，number、string、boolean）的值轉換為相應包裝類的物件。

TypeScript 為基本資料型別內建了包裝類，例如 Number、String 和 Boolean。這些包裝類提供了可用於操作相應基本資料型別的有用方法和屬性。

例如，Number 包裝類具有toFixed()、toString() 和 valueOf() 等方法。裝箱是 TypeScript 中的一個重要概念，因為它允許對基本資料型別使用否則不可用的方法。

語法

let variable_name: number = 12345
let boxing_variable_name: Object = variable_name // Boxing

在上面的語法中，我們可以看到型別為 number 的變數 variable_name 的值在裝箱過程中被轉換為物件型別變數。

示例

在此示例中，我們執行了裝箱操作。我們聲明瞭一個名為 BoxingClass 的類並聲明瞭兩個變數。一個是數字，另一個是物件型別變數。我們聲明瞭一個名為 boxingMethod() 的方法，在其中我們執行裝箱操作。最後，我們使用 console.log 列印 my_object 變數的值。

class BoxingClass {
   my_number: number = 123
   my_object: Object

   boxingMethod() {
      this.my_object = this.my_number
      console.log('Boxing Occurs for my_object variable')
   }
}

let boxing_object = new BoxingClass()
boxing_object.boxingMethod()
console.log('my_object value: ', boxing_object.my_object)

編譯後，它將生成以下 JavaScript 程式碼：

var BoxingClass = /** @class */ (function () {
   function BoxingClass() {
      this.my_number = 123;
   }
   BoxingClass.prototype.boxingMethod = function () {
      this.my_object = this.my_number;
      console.log('Boxing Occurs for my_object variable');
   };
   return BoxingClass;
}());
var boxing_object = new BoxingClass();
boxing_object.boxingMethod();
console.log('my_object value: ', boxing_object.my_object);

輸出

以上程式碼將產生以下輸出：

Boxing Occurs for my_object variable
my_object value:  123

TypeScript 中的拆箱

TypeScript 中的拆箱將具有複合資料型別（物件、陣列、元組、聯合型別等）的值轉換為更簡單的型別（字串、數字、布林值等）。它類似於其他程式語言中的“拆箱”，其中特定型別的（如物件）的值被轉換為更簡單的型別，例如字串或數字。

在 TypeScript 中，拆箱是使用型別斷言語法（尖括號）來指定要拆箱的值的型別來完成的。例如，如果我們有一個 any 型別的變數，我們可以使用以下語法將其拆箱為 number 型別：<number> value。

語法

let variable_name: number = 12345
let boxing_variable_name: Object = variable_name // Boxing
let unboxing_variable_name: number = <number>boxing_variable_name // Unboxing

在上面的語法中，我們可以看到型別為 number 的變數 variable_name 的值在裝箱過程中被轉換為物件型別變數，然後使用拆箱轉換回數字。

示例

在此示例中，我們執行了裝箱和拆箱操作。我們聲明瞭一個名為 BoxingUnboxingClass 的類並聲明瞭三個變數：兩個是數字，另一個是物件型別變數。首先，我們使用 boxingMethod() 執行裝箱過程，然後使用 unboxingMethod() 執行拆箱過程。最後，我們使用 console.log 列印變數的值。

class BoxingUnboxingClass {
   my_number: number = 123
   boxing_variable: Object
   unboxing_variable: number
   boxingMethod() {
      this.boxing_variable = this.my_number
      console.log('Boxing Occurs!')
   }
   unboxingMethod() {
      this.unboxing_variable = <number>this.boxing_variable
      console.log('Unboxing Occurs!')
   }
}
let boxing_unboxing_object = new BoxingUnboxingClass()
boxing_unboxing_object.boxingMethod()
boxing_unboxing_object.unboxingMethod()
console.log('boxing_variable value: ', boxing_unboxing_object.boxing_variable)
console.log(
   'unboxing_variable value: ',
   boxing_unboxing_object.unboxing_variable
)

編譯後，它將生成以下 JavaScript 程式碼：

var BoxingUnboxingClass = /** @class */ (function () {
   function BoxingUnboxingClass() {
      this.my_number = 123;
   }
   BoxingUnboxingClass.prototype.boxingMethod = function () {
      this.boxing_variable = this.my_number;
      console.log('Boxing Occurs!');
   };
   BoxingUnboxingClass.prototype.unboxingMethod = function () {
      this.unboxing_variable = this.boxing_variable;
      console.log('Unboxing Occurs!');
   };
   return BoxingUnboxingClass;
}());

var boxing_unboxing_object = new BoxingUnboxingClass();
boxing_unboxing_object.boxingMethod();
boxing_unboxing_object.unboxingMethod();
console.log('boxing_variable value: ', boxing_unboxing_object.boxing_variable);
console.log('unboxing_variable value: ', boxing_unboxing_object.unboxing_variable);

輸出

以上程式碼將產生以下輸出：

Boxing Occurs!
Unboxing Occurs!
boxing_variable value:  123
unboxing_variable value:  123

TypeScript 中的裝箱和拆箱指的是在將基本值傳遞給函式或從函式返回時處理它們的方式。裝箱將基本值型別轉換為物件型別，而拆箱是將物件型別轉換回基本值型別的反向過程。這些技術透過減少每次將值型別強制轉換為物件型別時分配的記憶體量來提高程式碼效能。

在 TypeScript 中，裝箱是透過將基本值分配給物件變數來完成的，而拆箱是使用型別斷言語法（尖括號）來指定要拆箱的值的型別來完成的。需要注意的是，基本值的記憶體分配在棧上，而物件值的記憶體分配在堆上。

列印頁面