TypeScript 中的问号运算符

Shuvayan Ghosh Dastidar 2023年1月30日 2022年5月18日
  1. 在 TypeScript 中使用问号 (?) 运算符
  2. 在 TypeScript 中使用问号 (?) 检查 undefined
TypeScript 中的问号运算符

TypeScript 对类型检查有严格的匹配策略。问号或 ? 通过定义可选参数减轻了用户的负担。

此外,? 运算符还可以作为检查对象的某个属性是 null 还是 undefined 的简写。我们将在本文中讨论 TypeScript 中问号运算符的使用。

在 TypeScript 中使用问号 (?) 运算符

parameter? : typeparameter: 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;

? 运算符也可以链接起来检查重复的 nullundefined 检查。

代码片段:

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

Shuvayan Ghosh Dastidar avatar Shuvayan Ghosh Dastidar avatar

Shuvayan is a professional software developer with an avid interest in all kinds of technology and programming languages. He loves all kinds of problem solving and writing about his experiences.

LinkedIn Website

相关文章 - TypeScript Operator