如何在 TypeScript 中指定可选属性?
我们将学习如何在 TypeScript 中指定可选属性。可选属性的真正含义是属性可以为 undefined 或 null，并且我们可以在需要时初始化它们。
在实时开发中，可选属性非常重要。例如，我们从 API 获取数据并对数据执行某些操作。如果由于数据库服务器宕机或其他问题而尝试在未获取数据的情况下使用数据，则会引发错误。在这种情况下，我们可以将数据属性设为可选，并检查数据是否可用，然后继续执行其他代码。
语法
我们可以按照以下语法将属性设为可选。这里，问号用于使属性可选。在以下语法中，optionalProp 是可选属性。
interface sample {
prop1: number;
optionaProp?: string;
}
示例 1
在此示例中，我们创建了一个示例接口，其中包含两个可选属性，分别为optionalProp和optionalProp2。在对象中，我们没有添加optionalProp2，但仍然可以编译TypeScript代码而不会出现任何错误。
此外，如果我们没有在对象内部定义可选属性，则无法通过将对象作为引用来访问它们。
// 创建包含两个可选属性的示例接口
interface sample {
prop1: string;
optionalProp?: number;
optionlProp2?: boolean;
}
// 创建 sample 类型的对象
let object: sample = {
prop1: "Hello!",
optionalProp: 20,
};
// 逐个访问对象属性
console.log("prop1 的值为 " + object.prop1);
console.log("optionalProp 的值为 " + object.optionalProp);
// 我们无法通过引用来访问可选属性 OptionalProp2，因为我们尚未定义它。
// console.log("optionalProp2 的值为 " + object.optionalProp2);
编译后将生成以下 JavaScript 代码:
// 创建 sample 类型的对象
var object = {
prop1: "Hello!",
optionalProp: 20
};
// 逐个访问对象属性
console.log("prop1 的值为 " + object.prop1);
console.log("optionalProp 的值为 " + object.optionalProp);
// 我们无法通过将对象作为引用来访问optionalProp2，因为我们尚未定义它。
// console.log("optionalProp2 的值为 " + object.optionalProp2);
输出
以上代码将产生以下输出 -
prop1 的值为 Hello! optionalProp 的值为 20
示例 2
在此示例中，我们将可选参数传递给了函数。我们可以使用"?"运算符来创建函数参数，就像我们将对象属性设置为可选一样。
建议在所有必需参数之后将可选参数传递给函数;否则，在将实参传递给函数时，用户可能会收到与参数类型相关的错误。
// 包含三个参数的函数，其中一个参数为可选参数。
function printParameters(param1: string, param2: number, param3?: boolean) {
console.log("参数 1 的值为 " + param1);
console.log("参数 2 的值为 " + param2);
console.log("参数 3 的值为 " + param3);
}
// 使用可选参数调用函数
printParameters("TutorialsPoint", 10, true);
// 使用不带可选参数调用函数
printParameters("TypeScript", 230);
编译后，它负责生成以下 JavaScript 代码 -
// 带有三个参数的函数，其中一个参数为可选参数
function printParameters(param1, param2, param3) {
console.log("参数 1 的值为 " + param1);
console.log("参数 2 的值为 " + param2);
console.log("参数 3 的值为 " + param3);
}
// 使用可选参数调用函数
printParameters("TutorialsPoint", 10, true);
// 使用可选参数调用函数
printParameters("TypeScript", 230);
输出
以上代码将产生以下输出 -
参数 1 的值为 TutorialsPoint 参数 2 的值为 10 参数 3 的值为 true 参数 1 的值为 TypeScript 参数 2 的值为 230 参数 3 的值为 undefined
示例 3
在下面的示例中，我们没有在对象内部定义 data3 属性，因为它是可选的。此外，用户可以了解我们如何在 if 条件中使用可选属性。
使用问号和点运算符访问任何对象的可选属性始终是一种很好的做法，可以避免错误。
// 创建 apiData 接口
interface apiData {
data1: string,
data2?: string,
data3?: string,
}
// 创建不带 data3 可选属性的 apiDataObject
let apiDataObject: apiData = {
data1: "数据已接收!",
data2: "数据也已接收!"
}
// 这里，我们使用问号来访问可选属性
if(apiDataObject?.data2){
console.log("数据 2 在对象中可用");
}
if(apiDataObject?.data3){
console.log("数据 3 在对象中可用");
}
编译后，它负责生成以下 JavaScript 代码 -
// 创建不带 data3 可选属性的 apiDataObject
var apiDataObject = {
data1: "Data Recived!",
data2: "Also Recived!"
};
// 这里，我们使用问号来访问可选属性
if (apiDataObject.data2) {
console.log("数据 2 在对象中可用");
}
if (apiDataObject.data3) {
console.log("数据 3 在对象中可用");
}
输出
上述代码将产生以下输出 -
数据 2 在对象中可用
在本教程中，我们学习了如何在 TypeScript 中使用可选属性。我们只需使用"?"即可使属性变为可选属性。此外，我们还可以将函数参数变为可选属性。此外，我们还学习了如何使用可选属性而不会出现任何错误。
