如何在 redux 中抑制嵌套对象中的"Object is possibly 'undefined'"

Question

考虑我们有如下的redux状态接口：

interface State {
designs: {
[key: number]: {
textboxes?: {
[key: number]: { override: boolean};
}
};
};
}

在我们的一个减速器案例中，我们有：

case 'SOME_ACTION_TYPE': {
const { designId, textboxId } = action.meta;
draft.designs[designId].textboxes[textboxId].override = true;
^^^^^^^^^^^^^^^^^^^^^^^
Object is possibly 'undefined'.ts(2532)
break;
}

如何抑制此打字错误？我用过这些没有运气：

1. draft.designs[designId] && draft.designs[designId].textboxes[textboxId].override = true;
2. draft.designs?.[designId].textboxes?.[textboxId].override = true;

Answer 1

我认为进行是合法的

const design = draft.designs[designId]
if (design) {
const textbox = design.textboxes[textboxId];
if (textbox) {
textbox.override = true;
}
}

当然，这既不美观也不简洁。https://docs-lodash.com/v4/property-path/如果你愿意添加一些库来获得支持，可能会做得更好。

带可选链式运算符(?(的单线解决方案：

(drafts.designs[designId]?.textboxes[textboxId] || {}).override = true;