Typescript 3.7@beta Optional Chaining operator using problem

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

Please note the exclamation symbol i.e,!

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

This operator is made for accessing deep nest values.

Let's look at document.getElementById('output')?.innerHTML. This will return undefined (if '#output' not exists) or string (if '#output' exists). And you trying to assign string to it.

Here you are trying to set a new value for an object property that may not exist.

So yep, optional property access can not be used at the left-hand side of an assignment.

You can read more about it in proposal

You can also solve this with an early return:

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

output.innerHTML = url.toString()

Use it like this for nested properties:

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

As mentioned here:

The Document method getElementById() returns an Element object representing the element whose id property matches the specified string.

If we go and see what properties the Element base class contains, you will see innerHTML.

This means that it is sure that an instance of Element(the result of getElementById) will have an innerHTML property, which is why you're getting the error.

This very short expression works for me nicely in typescript 4.0.3

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

in ES12 you can do this with Logical nullish assignment

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

so the assignment will happen only if the left-hand expression is not nullish.

this is just like if you would do

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

My exception was :

The left-hand side of an assignment expression may not be optional property access.

I received this error in typescript "~4.6.2" and solved it like.

let headingDom : HTMLElement | null = document?.querySelector('h1');
if(headingDom) headingDom.textContent = 'Hello World';