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

Question

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

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

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

prices 是一个具有子对象的对象，子对象具有诸如“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
            }
        }>>
}

然后你可以像这样使用optional chaining：

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

这里要注意的重要一点是，可选链接的语法总是?. 带有点，即使您没有使用点属性访问。根据the tc39 optional chaining proposal（强调添加）：

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

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

是的，这很奇怪，他们知道这一点。根据提案的FAQ：

obj?.[expr] 和 func?.(arg) 看起来很难看。为什么不像 那样使用obj?[expr] 和func?(arg)？

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

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

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

至于，由于，它与JavaScript有不同的语法约束。

好的，但我真的认为更好。

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

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

Playground link to code