TypeScript - 参数解构

在 TypeScript 中，参数解构是指将参数对象解包到单独的参数变量中。例如，假设我们已经将包含多个属性的对象作为任何函数的参数传递。在这种情况下，我们可以在参数中解构对象，并在单独的变量中访问对象的所需属性。

但是，我们可以解构作为函数参数传递的对象属性或数组。此外，在解构参数时，我们必须使用类型注解在 TypeScript 中定义每个参数的类型。因此，对于初学者来说可能不太清晰。

语法

您可以遵循以下语法在 TypeScript 中进行参数解构。

function getObjValues({ key1, key2 }: { key1: string; key2: number }) {
   // use key1 and key2 as a variable
}
// calling the function with an object
getObjValues({ key1: "Hello", key2: 20 });

在上述语法中，我们将参数作为函数传递。用户可以看到我们如何在参数中解构每个对象值。

示例

现在，我们将查看参数解构的各种示例，并学习它的不同用法。

示例 1

在下面的示例中，我们创建了 printObjValues() 函数，它将对象作为参数。我们正在解构对象并将对象的键值存储在参数变量中。

此外，用户可以看到我们如何在函数中使用参数值。

function printObjValues({ key1, key2 }: { key1: string; key2: number }) {
   console.log("The value of key1 is " + key1);
   console.log("The value of key2 is " + key2);
}
printObjValues({ key1: "Hello", key2: 20 });
printObjValues({ key1: "TypeScript", key2: 50 });

编译后，它将生成以下 JavaScript 代码：

function printObjValues(_a) {
   var key1 = _a.key1, key2 = _a.key2;
   console.log("The value of key1 is " + key1);
   console.log("The value of key2 is " + key2);
}
printObjValues({ key1: "Hello", key2: 20 });
printObjValues({ key1: "TypeScript", key2: 50 });

以上代码将产生以下输出：

The value of key1 is Hello
The value of key2 is 20
The value of key1 is TypeScript
The value of key2 is 50

示例 2

在下面的示例中，我们正在参数变量中解构对象值，但我们也为参数变量分配了默认值。param2 的默认值为“default”。因此，如果我们没有在参数对象中传递 param2 键值对，它将使用默认值，代码将无需任何错误即可执行。

此外，用户可以看到我们使用了 '？' 使 param2 参数可选。

function getParams({
   param1,
   param2 = "default",
}: {
   param1: boolean;
   param2?: string;
}) {
   console.log("The value of param1 is " + param1);
   console.log("The value of param2 is " + param2);
}

getParams({ param1: true, param2: "value" });
getParams({ param1: false });

编译后，它将生成以下 JavaScript 代码：

function getParams(_a) {
   var param1 = _a.param1, _b = _a.param2, param2 = _b === void 0 ? "default" : _b;
   console.log("The value of param1 is " + param1);
   console.log("The value of param2 is " + param2);
}
getParams({ param1: true, param2: "value" });
getParams({ param1: false });

以上代码将产生以下输出：

The value of param1 is true
The value of param2 is value
The value of param1 is false
The value of param2 is default

示例 3

在此示例中，所有参数都是可选的。我们将包含所有键和默认值的默认对象分配给参数变量。因此，我们可以使用包含一个、两个、三个或没有键值对的参数对象。

用户可以观察到，我们通过将包含各种数量的键值对的对象作为参数来调用函数。

// Creating the function whose all parameters are optional and initializing them with default values.
function sample_function(
   {
      value1,
      value2,
      value3,
   }: {
      value1?: number;
      value2?: number;
      value3?: number;
   } = { value1: 20, value2: 30, value3: 40 }
): number {
   let sum = value1 + value2 + value3;
   return sum;
}

console.log("The sum of default values is " + sample_function());
console.log(
   "The sum of 10000, 20302, and value3 is " +
   sample_function({ value1: 10000, value2: 20302 })
);
console.log(
   "The sum of 10, 20, and 25 is " +
   sample_function({ value1: 10, value2: 20, value3: 25 })
);

编译后，它将生成以下 JavaScript 代码：

// Creating the function whose all parameters are optional and initializing them with default values.
function sample_function(_a) {
   var _b = _a === void 0 ? { value1: 20, value2: 30, value3: 40 } : 
    _a, value1 = _b.value1, value2 = _b.value2, value3 = _b.value3;
   var sum = value1 + value2 + value3;
   return sum;
}
console.log("The sum of default values is " + sample_function());
console.log("The sum of 10000, 20302, and value3 is " + sample_function({ value1: 10000, value2: 20302 }));
console.log("The sum of 10, 20, and 25 is " + sample_function({ value1: 10, value2: 20, value3: 25 }));

以上代码将产生以下输出：

The sum of default values is 90
The sum of 10000, 20302, and value3 is NaN
The sum of 10, 20, and 25 is 55

示例 4

在此示例中，我们将 lock 类型的对象作为函数参数传递。lock 接口包含 lock_id 和 isDurable 属性。我们创建了 'lockObj' 并将其作为 callLockFunc() 函数的参数传递。

在 callLockFunc() 函数中，我们已在变量中解构参数对象并打印它们以显示其值。

interface lock {
   lock_id?: string;
   isDurable?: boolean;
}

let lockObj: lock = {
   lock_id: "4523fdr0",
   isDurable: true,
};

function callLockFunc(obj: lock) {
   let { lock_id, isDurable } = obj;
   console.log("The destructured lock_id value is " + lock_id);
   console.log("The destructured isDurable value is " + isDurable);
}

callLockFunc(lockObj);

lockObj.isDurable = false;
lockObj.lock_id = "eredf";
callLockFunc(lockObj);

编译后，它将生成以下 JavaScript 代码：

var lockObj = {
   lock_id: "4523fdr0",
   isDurable: true
};
function callLockFunc(obj) {
   var lock_id = obj.lock_id, isDurable = obj.isDurable;
   console.log("The destructured lock_id value is " + lock_id);
   console.log("The destructured isDurable value is " + isDurable);
}
callLockFunc(lockObj);
lockObj.isDurable = false;
lockObj.lock_id = "eredf";
callLockFunc(lockObj);

以上代码将产生以下输出：

The destructured lock_id value is 4523fdr0
The destructured isDurable value is true
The destructured lock_id value is eredf
The destructured isDurable value is false

打印页面