Programing

Typecript 3.7@베타(선택 사항) 문제를 사용하는 체인 작업자

c10106 2022. 4. 9. 09:52
반응형

Typecript 3.7@베타(선택 사항) 문제를 사용하는 체인 작업자

나는 선택적 체인 교환원을 타이프로 작성하려고 하는데 이 예외를 버렸다.

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()

이 문제를 어떻게 해결할 것인가?

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

느낌표 기호를 기록해 두십시오. 예를 들어!

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

이 연산자는 깊은 내포 값에 액세스하기 위해 만들어졌다.

보자document.getElementById('output')?.innerHTML이것은 돌아올 것이다.undefined('#출력'이 없는 경우) 또는string('#출력'이 있는 경우).그리고 당신은 할당하려고 한다.string하게

여기서 존재하지 않을 수 있는 개체 속성에 대한 새 값을 설정하려고 하는 경우.

그래, 선택적 속성 액세스는 할당 왼쪽에서 사용할 수 없다.

프러포즈에서 그것에 대해 더 많이 읽을 수 있다.

ES12에서 논리 무효 할당으로 이 작업을 수행할 수 있음

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

따라서 왼쪽 표현이 무효가 아닌 경우에만 임무가 수행될 것이다.

이것은 네가 할 수 있는 것과 같다.

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

또한 조기 반환을 통해 이 문제를 해결할 수 있다.

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

여기에 언급된 바와 같이:

Document method getElementById()는 ID 속성이 지정된 문자열과 일치하는 요소를 나타내는 요소 객체를 반환한다.

Element base 클래스에 포함된 속성이 무엇인지 확인하면 을(를) 볼 수 있다.

원소의 한 인스턴스(결과)가 확실하다는 것을 의미한다.getElementById)은(는)innerHTML그래서 오류가 생긴 거야

이 아주 짧은 표현은 4.0.3의 타이프에서 나에게 잘 통한다.

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

참조URL: https://stackoverflow.com/questions/58414515/typescript-3-7beta-optional-chaining-operator-using-problem

반응형