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

Question

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

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[] || [];

上面写着

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

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

Answer 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 演示了这些场景中的每一个。