迹忆客 专注技术分享

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，则为运算符。