如何在 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 中使用可选属性。我们只需使用“？”即可使属性可选。此外，我们可以使函数参数可选。此外，我们学习了如何在不出现任何错误的情况下使用可选属性。