typescript 在不等式中使用可选通道(?.)的类型脚本

cnh2zyt3  于 2023-01-14  发布在  TypeScript
关注(0)|答案(2)|浏览(132)

我认为可以在不等式中使用可选链接(?.运算符),但是我收到一个Typescript错误,说我的变量可能未定义。
我在一个在线TypeScript Plaground中试用了下面的代码,所以我可以看到getSize1()getSize2()的编译代码是不同的,但我不完全理解为什么。

interface Options {
    maxHeight?: number;
}

function getSize1(width: number, options: Options) {
    const height = width * 2;
    if (height > options?.maxHeight) {  // <-- Doesn't work
        const newWidth = options.maxHeight / 2;
        return [newWidth, height];
    }

    return [width, height];
}

function getSize2(width: number, options: Options) {
    const height = width * 2;
    if (options.maxHeight && height > options.maxHeight) {  // <-- Works
        const newWidth = options.maxHeight / 2;
        return [newWidth, height];
    }

    return [width, height];
}

为什么getSize1()中的if语句与getSize2()中的不同?getSize2()是否有简写语法?

hm2xizp9

hm2xizp91#

可选的链接运算符检查您试图访问的对象是否为null或未定义,而不是属性。
如果options是一个可选参数,这将非常有用。

function getSize1(width: number, options?: Options)

要检查属性是否未定义,您有两个选项。
显式检查未定义的:

if (options.maxHeight !== undefined && height > options.maxHeight)

检查所有falsy值,其中包括无效的0

if (options.maxHeight && height > options.maxHeight)
jljoyd4f

jljoyd4f2#

在第一种情况下,options?.maxHeightoptions.maxHeight具有相同的类型:number | undefined(因为它可能未定义)。因此,您正在比较类型number > number | undefined,但typescript不允许number > undefined2 > undefined的含义是什么?)。因此,出现此错误。
在第二种情况options.maxHeight && height > options.maxHeight中,比较是在类型number > number上进行的,因为已经很清楚它的存在。

相关问题