Question

我正在尝试打字机的可选链运算符，但抛出了此异常。

index.ts:6:1 - error TS2779: The left-hand side of an assignment expression may not be an optional property access.

我的示例代码如下

const url = URI({
    protocol: 'http',
    hostname: 'example.org' 
})

// This line throwed
document.getElementById('output')?.innerHTML = url.toString()

如何解决此问题？

Answer 1

objectVariableName!.propertyName = 'some value to assign';

<块引用>

请注意感叹号，即！

Answer 2

如here所述：

Document方法getElementById（）返回一个 Element 对象，该对象表示其id属性与指定字符串匹配的元素。

如果我们去看看what properties的元素基类所包含的内容，您将看到innerHTML。

这意味着确定可以确定元素实例（getElementById的结果）将具有innerHTML属性，即为什么会出现错误。

Answer 3

const output = document.getElementById('output');
if (output) output.innerHTML = url.toString()

该运算符用于访问深层嵌套值。

~~让我们看一下document.getElementById('output')?.innerHTML。这将返回undefined（如果'#output'不存在）或string（如果'#output'存在）。然后您尝试为其分配string。~~

这里您要设置对象的属性值，该值可能不存在。

是的，不能在分配的左侧使用可选属性访问。

您可以在proposal

中了解更多信息

Answer 4

在 ES12 中，您可以使用逻辑空赋值来做到这一点

document.getElementById('output')?.innerHTML ??= url.toString()

所以只有当左边的表达式不为空时才会发生赋值。

这就像你愿意

if (document.getElementById('output')?.innerHTML) {
  document.getElementById('output').innerHTML = url.toString()
}

Answer 5

这个简短的表达在4.0.3版打字稿中很适合我

let domEl: HTMLElement | null = document.querySelector("#app");
domEl && (domEl.style.color = "green");

Answer 6

您也可以提前归还解决此问题：

const output = document.getElementById('output');
if (!output) return;

output.innerHTML = url.toString()

将其用于嵌套属性：

if (!item?.text) return;

item.text.text = action.payload.text;

https://medium.com/swlh/return-early-pattern-3d18a41bba8

https://softwareengineering.stackexchange.com/questions/18454/should-i-return-from-a-function-early-or-use-an-if-statement

Answer 7

只需转到 tsconfig.json "compilerOptions": {

删除这个

navigation.navigate('UserPanel', { selectedUser });

并添加这个

"strict": true,

Typescript 3.7@beta使用问题的可选链接运算符

7 个答案: