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
여기에 언급된 바와 같이:
Document method getElementById()는 ID 속성이 지정된 문자열과 일치하는 요소를 나타내는 요소 객체를 반환한다.
Element base 클래스에 포함된 속성이 무엇인지 확인하면 을(를) 볼 수 있다.
이는 원소의 한 인스턴스(결과)가 확실하다는 것을 의미한다.getElementById
)은(는)innerHTML
그래서 오류가 생긴 거야
이 아주 짧은 표현은 4.0.3의 타이프에서 나에게 잘 통한다.
let domEl: HTMLElement | null = document.querySelector("#app");
domEl && (domEl.style.color = "green");
'Programing' 카테고리의 다른 글
형식:동일한 개체 내의 다른 속성에 종속되는 속성 유형 (0) | 2022.04.09 |
---|---|
구성 요소가 리듀렉스 저장소에 연결되지 않는 이유 (0) | 2022.04.09 |
Nuxt + Vuex mapGetters 값은 항상 정의되지 않음 (0) | 2022.04.09 |
형식 지정자가 클래스의 인터페이스 속성을 자동으로 가져오기 (0) | 2022.04.09 |
Vue 라우터를 사용할 때 VueJS 구성 요소 간에 데이터를 전달하는 방법 (0) | 2022.04.09 |