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 中，装箱是通过将基本值分配给对象变量来完成的，而拆箱是使用类型断言语法（尖括号）来指定要拆箱的值的类型来完成的。需要注意的是，基本值的内存分配在栈上，而对象值的内存分配在堆上。

打印页面