TypeScript 中的问号运算符
Shuvayan Ghosh Dastidar
2023年1月30日
TypeScript 对类型检查有严格的匹配策略。问号或 ? 通过定义可选参数减轻了用户的负担。
此外，? 运算符还可以作为检查对象的某个属性是 null 还是 undefined 的简写。我们将在本文中讨论 TypeScript 中问号运算符的使用。
在 TypeScript 中使用问号 (?) 运算符
parameter? : type 是 parameter: type | undefined = undefined。因此，它为分配未定义的参数提供了一种方便的快捷方式。
代码片段：
interface Props{
name : string ;
age? : number ;
}
function getDetails(props : Props){
if ( props.age !== undefined){
console.log("Hi my name is " + props.name + " , and my age is " + props.age.toString() );
} else {
console.log("Hi my name is " + props.name );
}
}
getDetails({ name : "Geralt"});
getDetails( { name : "Geralt", age : 95});
输出：
"Hi my name is Geralt"
"Hi my name is Geralt , and my age is 95"
Props 接口中的可选字段允许年龄属性为空，同时将其传递给 getDetails 函数。它也适用于带参数的函数。
让我们再举一个没有 Props 接口的例子。
代码片段：
function getDetails(name :string, age? : number){
if ( age === undefined){
console.log("Name : " + name);
} else {
console.log("Name : " + name + ", Age : " + age.toString());
}
}
getDetails("Geralt");
getDetails("Geralt", 95);
输出：
"Name : Geralt"
"Name : Geralt, Age : 95"
上面的函数定义也可以写成长格式：
function getDetails(name :string, age : number | undefined = undefined){
...
}
在 TypeScript 中使用问号 (?) 检查 undefined
问号或 ? 运算符也可用于检查对象的某个属性是 null 还是 undefined。
语法：
user?.name
上面的 TypeScript 代码转换为 JavaScript 为：
user === null || user === undefined ? undefined : user.name;
? 运算符也可以链接起来检查重复的 null 或 undefined 检查。
代码片段：
interface User {
user : {
name : string;
}
}
interface Data {
data : User
}
// faulty data from an API call
let d : Data = {
data : {
user : undefined
}
}
let userName = d?.data?.user?.name ?? 'default name';
console.log(userName);
输出：
"default name"
因此，来自 API 调用的一些错误数据可能包含一些 undefined 字段。上面的代码段显示了如何链接 ? 运算符有 null，最后使用 ?? 如果返回了 undefined，则为运算符。
