迹忆客 专注技术分享

当前位置:主页 > 学无止境 > 编程语言 > TypeScript >

TypeScript 中的问号运算符

作者:迹忆客 最近更新:2023/03/12 浏览次数:

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

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 TypeScript 中返回一个 Promise

发布时间:2023/03/19 浏览次数:182 分类:TypeScript

本教程讨论如何在 TypeScript 中返回正确的 Promise。这将提供 TypeScript 中 Returns Promise 的完整编码示例,并完整演示每个步骤。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便