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

Question

我正在尝试理解optional chaining（也称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;
}

- O S

---

IUser 是什么？ - jcalz

@jcalz 这是一个充当模型的接口，我已经在主要问题中更新并添加了相关代码。 - O S

根据这个定义，我建议您使用--strictNullChecks而不必担心检查null，因为null和undefined不在string的域中。如果您期望值是类似于null的，则接口定义应该说明（例如，将属性设置为可选？） - jcalz

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，因为||仅检查nullish表达式。

这是您的代码的样子：

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

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

关于逻辑运算符 || 可能引发的错误

检查这个例子：你创建了一个应用程序，用户可以设置一个计时器。用户可以选择大于0的时间，但如果没有，你会为他们设定一个默认时间。这是如何获取计时器的时间：

const time = userTime || defaultTime;

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

为了避免这种情况，使用nullish coalescing运算符，只有在userTime等于null或undefined时才回退:

```JavaScript time = userTime ?? defaultTime; ```

const time = userTime ?? defaultTime;

以上代码将按预期运行。

- Baboo

---

请问您能否提供有关使用“||”时出现的错误的更多信息？如果我使用“||”，会发生什么，会出现什么错误？ - O S

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
}

- Murat Karagöz