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_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

用户学会了对作为函数参数传递的对象进行结构化处理。此外，我们还学会了为参数传递默认值或对象。在最后一个例子中，我们学会了将一个对象解构到函数主体中。