尝试初始化嵌套数组时出错“赋值表达式的左侧可能不是可选的属性访问。”

Posted 2023-03-11

【中文标题】尝试初始化嵌套数组时出错“赋值表达式的左侧可能不是可选的属性访问。”

【英文标题】：Getting error when trying to initialize nested array "The left-hand side of an assignment expression may not be an optional property access."

【发布时间】：2021-08-30 12:08:20

【问题描述】：

我有一个对象，里面有一个数组，里面还有第二个数组，就像这样。

export class OrdenCompra 
public id?: number,
public insumos?: OrdenCompraInsumo[],


export class OrdenCompraInsumo 
id?: number;
traslados?: IImpuestoTraslado[];


export class ImpuestoTraslado
public id?: number,
public impuesto?: number

我想增加一些价值

特拉斯拉多斯

喜欢这个

const retencion = new ImpuestoRetencion();
ordenCompra?.insumos[index]?.retenciones?.push(retencion); 

但此时

ordenCompra?.insumos[index]?.retenciones?

是的

未定义

所以它永远不会被赋值。

如果我尝试初始化我会得到一个错误。

ordenCompra?.insumos[index]?.retenciones = []

或

ordenCompra?.insumos[index]?.retenciones = ImpuestoRetencion[];

或

ordenCompra?.insumos[index]?.retenciones: ImpuestoRetencion[] || [];

上面写着

赋值表达式的左侧可能不是可选的属性访问。

所以我无法为这个数组赋值。我知道这是一个非常微不足道的问题，但即使我搜索了几个小时。

【参考方案1】：

?.，称为optional chaining，仅用于读取/调用，不用于设置。来自docs：

在其核心，可选链让我们编写代码，如果遇到null 或undefined，TypeScript 可以立即停止运行某些表达式。

所以你可能会这样理解const foobarbaz = foo?.bar?.baz：

// Will have type: undefined | typeof baz
const foobarbaz = foo === undefined || foo === null
                    ? undefined
                    : foo.bar === undefined || foo.bar === null
                      ? undefined
                      : foo.bar.baz

这在集合的上下文中没有意义，因为您不能将 null 或 undefined 设置为值：

foo?.bar?.baz = foobarbaz
// ^^^^^^^^^^ - The left-hand side of an assignment expression may not be
//                an optional property access.

// Practically the same as:
(foo === undefined || foo === null
  ? undefined
  : foo.bar === undefined || foo.bar === null
    ? undefined
    : foo.bar.baz) = foobarbaz

要设置此属性，您必须检查foo.bar.baz 的值是否为空。这可以通过将赋值包装在 if 语句中来完成：

foo.bar.baz = something; // error!

if(foo?.bar?.baz) 
  foo.bar.baz = something; // OK

如果您知道您的值不是 null 或 undefined 但编译器无法自行确定，请使用non-null assertion operator (!.)：

foo!.bar!.baz = something; // OK

Here is a playground 演示了这些场景中的每一个。

【讨论】：

谢谢，我只是意识到删除 ?字符允许设置值。