資料結構
網路
關係資料庫管理系統 (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+ 次瀏覽
