如何在 TypeScript 中指定可选属性

我们将学习如何在TypeScript中指定选项属性。可选属性的真正含义是，属性可以是未定义的或空的，我们可以在需要时初始化它们。

在实时开发中，可选属性的重要性是非常大的。例如，我们正在从API中获取数据，并对数据进行一些操作。如果你试图在没有得到数据的情况下使用数据，由于数据库服务器被关闭或有任何其他问题，它将引发一个错误。在这种情况下，我们可以让data属性成为可选项，并检查是否有数据可用，然后再继续执行其他代码。

语法

我们可以按照下面的语法来使该属性成为可选项。这里，问号被用来使属性成为可选。在下面的语法中，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);

// 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");
}

// 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");
}