TypeScript 中的可选链（Elvis 运算符）是什么？它是如何工作的？

Question

我试图了解什么是可选链（Elvis 运算符）以及它是如何工作的，以及它在 TypeScript 中的用途是什么？

public static getName(user: IUser){
    if(user.firstName != null && user.firstName != ""){
        return user.firstName;
    }

    if(user.lastName != null && user.lastName != ""){
        return user.lastName;
    }

    return user.username;
}

例如，我可以对上面的代码应用可选链以使其更短吗？

-编辑-

评论后用代码更新了问题。

export interface IUser {
    id: string;
    firstName: string;
    lastName: string;
    username: string;
}

Answer 1

可选的链接运算符

可选的链接运算符可帮助您编写一旦遇到null或undefined就停止运行的表达式。

例如，如果您想检查该用户不是null或，您可以像这样重构您的代码undefined：

public static getName(user: IUser): string {
    if(user?.firstName != null && user?.firstName != ""){
        return user.firstName;
    }

    if(user?.lastName != null && user?.lastName != ""){
        return user.lastName;
    }

    return user?.username || "";
}

真正有趣的是你可以将它与数组和函数一起使用：

// Access first element of array if array is set
const element = array?.[0];

// Call function if set
myFunction.(args);

但就您而言，空合并运算符更适合缩短代码。

空合并运算符

空合并运算符的作用类似于逻辑运算符，||不同之处在于，如果检查的值等于null或undefined仅它会回退到默认值。||它可以防止当值等于0或时产生的错误，Nan因为||仅检查空表达式。

您的代码如下所示：

public static getName(user: IUser){
    return user?.firstName ?? user?.lastName ?? user?.username ?? "";
}

上面两个运算符都用于更健壮的代码。

||有关逻辑运算符可能引发的错误的更多信息

检查此示例：您创建一个用户可以在其中设置计时器的应用程序。用户可以选择大于 的时间0，但如果他不这样做，您可以为他们设置默认时间。这是获取计时器时间的方法：

const time = userTime || defaultTime;

如果用户输入严格大于 0 的数字，则它会按您的预期工作 和time === userTime。但如果它们输入0，逻辑运算符||将检测0为空表达式并回退到defaultTime。

为了避免这种情况，请使用空合并运算符，该运算符仅在userTime等于null或时才回退undefined：

const time = userTime ?? defaultTime;

上面的代码将按预期工作。

Answer 2

您可以使用空合并运算符。

function getFastname(user: IUser) {
    return user.firstName != "" ? user.firstName : null ?? 
    user.lastName != "" ? user.lastName: null ?? 
    user.username
}

如果你不检查的话它会小很多""，那么你可以这样做

function getFastname(user: IUser) {
    return user.firstName ?? user.lastName ?? user.username
}

最后是布尔逻辑运算符，它也适用于""

function getFastname(user: IUser) {
    return user.firstName || user.lastName || user.username
}