如何在 TypeScript 中指定可選屬性？

---

我們將學習如何在 TypeScript 中指定可選屬性。可選屬性的真正含義是屬性可以是未定義的或 null，並且我們可以在需要時初始化它們。

在即時開發中，可選屬性的重要性非常大。例如，我們從 API 獲取資料並在資料上執行一些操作。如果您在由於資料庫伺服器宕機或其他任何問題而未獲取資料的情況下嘗試使用資料，它將引發錯誤。在這種情況下，我們可以使資料屬性可選，並檢查資料是否可用，只有在可用時才繼續執行其他程式碼。

語法

我們可以遵循以下語法使屬性可選。這裡，問號用於使屬性可選。optionalProp 是以下語法中的可選屬性。

interface sample {
   prop1: number;
   optionaProp?: string;
}

示例 1

在此示例中，我們建立了一個包含兩個名為 optionalProp 和 optionalProp2 的可選屬性的示例介面。在物件中，我們沒有新增 optionalProp2，但我們仍然可以編譯我們的 TypeScript 程式碼而不會出現任何錯誤。

此外，如果我們沒有在物件內部定義可選屬性，則不能透過將物件作為引用來訪問它們。

// Creating the sample interface with two optional properties
interface sample {
   prop1: string;
   optionalProp?: number;
   optionlProp2?: boolean;
}

// Creating the object of type sample
let object: sample = {
   prop1: "Hello!",
   optionalProp: 20,
};

// Accessing the object properties one by one
console.log("The value of prop1 is " + object.prop1);
console.log("The value of optionalProp is " + object.optionalProp);

// We can't access the optionalProp2 by taking the object as a refernce, as we haven't defined it.

// console.log("The value of optionalProp2 is " + object.optionalProp2);

編譯後，它將生成以下 JavaScript 程式碼

// Creating the object of type sample
var object = {
   prop1: "Hello!",
   optionalProp: 20
};

// Accessing the object properties one by one
console.log("The value of prop1 is " + object.prop1);
console.log("The value of optionalProp is " + object.optionalProp);

// We can't access the optionalProp2 by taking the object as a refernce, as we haven't defined it.

// console.log("The value of optionalProp2 is " + object.optionalProp2);

輸出

以上程式碼將產生以下輸出：

The value of prop1 is Hello!
The value of optionalProp is 20

示例 2

在此示例中，我們將可選引數傳遞給函式。我們可以使用“？”運算子來使函式引數可選，就像我們使物件屬性可選一樣。

建議在所有必需引數之後傳遞可選引數給函式；否則，在將引數傳遞給函式時，使用者可能會收到與引數型別相關的錯誤。

// Function with three parameters containing the one parameter optional
function printParameters(param1: string, param2: number, param3?: boolean) {
   console.log("The value of the param 1 is " + param1);
   console.log("The value of the param 2 is " + param2);
   console.log("The value of the param 3 is " + param3);
}

// Invoking the function with an optional parameter
printParameters("TutorialsPoint", 10, true);

// Invoking the function without an optional parameter
printParameters("TypeScript", 230);

編譯後，它將生成以下 JavaScript 程式碼：

// Function with three parameters containing the one parameter optional
function printParameters(param1, param2, param3) {
   console.log("The value of the param 1 is " + param1);
   console.log("The value of the param 2 is " + param2);
   console.log("The value of the param 3 is " + param3);
}

// Invoking the function with an optional parameter
printParameters("TutorialsPoint", 10, true);

// Invoking the function without an optional parameter
printParameters("TypeScript", 230);

輸出

以上程式碼將產生以下輸出：

The value of the param 1 is TutorialsPoint
The value of the param 2 is 10
The value of the param 3 is true
The value of the param 1 is TypeScript
The value of the param 2 is 230
The value of the param 3 is undefined

示例 3

在下面的示例中，我們沒有在物件內部定義 data3 屬性，因為它可選。此外，使用者可以學習如何在 if 條件中使用可選屬性。

始終建議使用問號和點運算子來訪問任何物件的可選屬性，以避免錯誤。

// Creating the apiData interface
interface apiData {
   data1: string,
   data2?: string,
   data3?: string,
}

// Creating the apiDataObject without and data3 optional property
let apiDataObject: apiData = {
   data1: "Data Recived!",
   data2: "Also Recived!"
}

// Here, we have used the question mark to access the optional property
if(apiDataObject?.data2){
   console.log("The data 2 is avialable in the object");
}

if(apiDataObject?.data3){
   console.log("The data 3 is avialable in the object");
}

編譯後，它將生成以下 JavaScript 程式碼：

// Creating the apiDataObject without and data3 optional property
var apiDataObject = {
   data1: "Data Recived!",
   data2: "Also Recived!"
};

// Here, we have used the question mark to access the optional property
if (apiDataObject.data2) {
   console.log("The data 2 is avialable in the object");
}

if (apiDataObject.data3) {
   console.log("The data 3 is avialable in the object");
}

輸出

以上程式碼將產生以下輸出：

The data 2 is avialable in the object

在本教程中，我們學習瞭如何在 TypeScript 中使用可選屬性。我們只需使用“？”即可使屬性可選。此外，我們可以使函式引數可選。此外，我們學習瞭如何在不出現任何錯誤的情況下使用可選屬性。