Typescript 3.7@beta Необязательный оператор цепочки с использованием задачи

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

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

Этот оператор предназначен для доступа к значениям глубоких гнезд.

Давайте рассмотрим document.getElementById('output')?.innerHTML. Это вернет undefined (если «#output» не существует) или string (если «#output» существует). И вы пытаетесь присвоить ему string.

Здесь вы пытаетесь установить значение свойства объекта, которое может не существовать.

Так что да, доступ к дополнительному свойствуне может использоваться слева от задания.

Подробнее об этом можно прочитать в предложении

Answer 2

Как уже упоминалось здесь :

Метод Document getElementById () возвращает объект Element , представляющий элемент, свойство id которого соответствует указанной строке.

Если мы пойдем и увидим какие свойства Элемент базового класса содержит, вы увидите innerHTML.

Это означает, что уверен , что экземпляр элемента (результат getElementById) будет иметь свойство innerHTML, поэтомувы получаете ошибку.