数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学TypeScript 中的参数解构是什么？
在 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
用户学习了如何解构作为函数参数传递的对象。此外，我们学习了为参数传递默认值或对象。在最后一个示例中，我们学习了如何将对象解构到函数体中。
7000+ 次浏览
