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

列印頁面