使用按键括号语法查找时在打字稿中使用可选链

Question

我正在尝试在以下内容中使用可选的链接运算符：

productPrice1: product.prices["1"]?.amount.amount_1,

我的问号确保如果键 ["1"] 的子对象不存在，它不会失败。但是，如果价格对象（父对象）也不存在，我也想这样做。

价格是一个带有子对象的对象，这些对象具有诸如“1”、“2”、“3”之类的键。我想首先检查价格是否为空，如果不是，则检查 ["1"] 是否存在。

我最初的尝试是尝试这个，但它不起作用：

productPrice1: product.prices?["1"]?.amount.amount_1,

我试图避免执行以下操作，并想知道这是否是我唯一的选择：

productPrice1: product.prices != null ? product.prices?["1"]?.amount.amount_1 : null,

Answer 1

假设您的product值类似于以下类型：

declare const product: {
    prices?: Partial<Record<"1" | "2" | "3",
        {
            amount: {
                amount_1: number
            }
        }>>
}

然后你可以像这样使用可选链接：

const val = {
    productPrice1: product.prices?.["1"]?.amount.amount_1
}

这里要注意的重要一点是，可选链接的语法始终 ?.使用点，即使您没有使用点属性访问。根据tc39 可选链接建议（重点添加）：

可选链运算符拼写为?.。它可能出现在三个位置：

obj?.prop // optional static property access obj?.[expr] // optional dynamic property access func?.(...args) // optional function or method call

是的，这很奇怪，他们也知道。根据提案的常见问题解答：

obj?.[expr]并且func?.(arg)看起来很丑。为什么不使用obj?[expr]和func?(arg)一样<语言X>？

我们不使用obj?[expr]andfunc?(arg)语法，因为解析器很难有效地将这些形式与条件运算符区分开来，例如，obj?[expr].filter(fun):0和func?(x - 2) + 3 :1。

这两种情况的替代语法各有其缺陷；决定哪个看起来最不坏主要是个人品味的问题。以下是我们做出选择的方式：

• 为这种obj?.prop情况选择最好的语法，这预计最常发生；
• 将可识别?.字符序列的使用扩展到其他情况：obj?.[expr], func?.(arg).

至于 <language X>，它与 JavaScript 具有不同的语法约束，因为 <some 构造不支持 X 或在 X 中工作方式不同>。

好的，但我真的认为 <alternative syntax> 更好。

过去已经探索并广泛讨论了各种替代语法。他们都没有达成共识。搜索标签为“alternative syntax”的问题，以及对语义有影响的标签为“alternative syntax and semantics”的问题。

好的，希望有帮助；祝你好运！

Playground 链接到代码