迹忆客 专注技术分享

TypeScript 是一种强类型语言，支持创建用户定义类型和本机类型。除了类型之外，还有 null 和 undefined，它们确定变量中是否有意或无意缺少值。

如果将 null 值分配给类型化变量，TypeScript 会报错。这是感叹号或砰砰声或!运算符用于强制编译器将值解释为非空值。

本教程将重点介绍如何使用!运算符。

在 TypeScript 中使用 !断言非 Null 的运算符

这 !运算符可以强制编译器将值断言为非 null 或非 undefined，尽管值类型可能为 null 或者是类型的联合，其中 null 是其中一种类型。当用户知道该值永远不会为 null 时，这是由用户完成的。

这 !运算符是在转编译为 JavaScript 时删除的 TypeScript 语法。它可以被认为是类似的断言运算符，如 as。

以下基本示例将显示!可以使用。

function getValue() : number | undefined {
    return 3;
}   

var realValue : number | undefined;
realValue = getValue();
var value : number;
value = realValue!;
console.log(value);

输出：

3

getValue() 函数可能是一个繁重的计算调用，但始终确保返回一个 number 类型。没有!运算符，TypeScript 将显示诸如 Type 'number | undefined' is not assignable to type 'number'。

!运算符强制编译器将该值断言为非空，并且以后不再抛出错误。

! 的示例用法 TypeScript 中的运算符

! 的示例可以使用的运算符在代码段中给出。

interface Fruit {
    code : string;
    fruit : string;
}

const fruits : Fruit[] = [ 
    {
        code : "ORA", 
        fruit : "Orange"
    },
    {
        code : "APL", 
        fruit : "Apple"
    },
    {
        code : "GRA", 
        fruit : "Grapes"
    },
    {
        code : "LITC", 
        fruit : "Litchi"
    }
]

const findFruit = ( fruitToFilter : string ) => {
    return fruits.find( fruit => fruit.code === fruitToFilter);
}

const fruit : Fruit = findFruit("APL")!;
console.log(fruit);

输出：

{
  "code": "APL",
  "fruit": "Apple"
} 

find 操作返回类型 string | undefined"。编译器被迫将其视为字符串而不考虑 undefined，因为用户确定返回的值不会是 undefined`。

TypeScript 中!操作符的有害影响

用户提供!运算符并强制编译器将该值视为非 null。如果返回的值是 undefined 或 null，编译器将不会捕获任何错误，并且应用程序可能会面临运行时错误。

所以 !应避免使用运算符，仅在保证返回的值不会为 null 或 undefined 时使用。