TypeScript 中的装箱和拆箱


装箱和拆箱的概念对TypeScript至关重要。TypeScript 中的值类型会通过称为装箱的过程自动转换为引用类型。换句话说,装箱是指将值类型转换为引用类型,而拆箱是指将引用类型转换为值类型。这两种技术用于在 TypeScript 中将值类型转换为对象类型。

装箱是将值类型包装在对象类型中的过程。相反,拆箱是将对象类型解包回值类型。这两种技术通过减少每次将值类型转换为对象类型时分配的内存量来提高代码性能。

TypeScript 中的装箱拆箱指的是在将基本值传递给函数或从函数返回时处理它们的方式。当基本值传递给函数时,它会被装箱,这意味着它会被转换为对象。当值从函数返回时,对象会被拆箱,并且会返回基本值。这个过程是必要的,因为基本值不是面向对象的,必须将其转换为函数才能对其进行操作。装箱和拆箱可以提高 TypeScript 应用程序的性能和内存使用率。

现在让我们详细解释这两个主题。

TypeScript 中的装箱

TypeScript 中的装箱是指将基本数据类型(例如,数字、字符串、布尔值)的值转换为相应包装类的对象。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() 的方法,我们在其中执行装箱操作。最后,我们控制台输出 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() 执行拆箱。最后,我们控制台输出变量的值。

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

更新于: 2023年1月20日

2K+ 浏览量

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告