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

您可以使用无效的合并运算符。

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
}

Answer 2

可选的链接运算符

可选的链接运算符可帮助您编写遇到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;

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