What does exclamation point after variable mean in TypeScript?

在 TypeScript 中，变量后面的感叹号（!）是一个非空断言操作符。这个操作符用于告诉 TypeScript 编译器，开发者已经确定这个变量在使用时不会为 null 或 undefined，即使从类型上看这个变量是有可能为 null 或 undefined 的。

这通常用在开发者能够确保某个值一定会被赋值，但 TypeScript 的类型检查可能无法推断出这一点的情况。使用非空断言操作符可以避免 TypeScript 的编译错误。

示例

假设我们有一个接口 User 和一个可能返回 User 或者 null 的函数 getUserById：

typescript
interface User {
    id: number;
    name: string;
}

function getUserById(id: number): User | null {
    // 模拟用户数据获取
    if (id === 1) {
        return { id: 1, name: 'Alice' };
    }
    return null;
}

const user = getUserById(1);
console.log(user!.name);  // Alice

在这个例子中，尽管 getUserById 函数的返回类型是 User | null，意味着 user 变量可能是 null，但我们在调用 getUserById(1) 时，通过实现逻辑知道它会返回一个 User 对象。因此，我们可以使用 ! 后缀来告诉 TypeScript 编译器 user 在这种情况下不会是 null，从而安全地访问 user.name 属性而不会引发编译错误。

然而，需要注意的是，滥用非空断言操作符可能会导致运行时错误，因为它基本上是在告诉编译器忽略空值检查。如果在不适当的情况下使用，而变量实际上是 null 或 undefined，那么在运行时访问这个变量的属性或方法时就会导致错误。因此，建议只在确实能够保证变量不为 null 或 undefined 的情况下使用此操作符。