[Typescript] Object is possibly 'null'.ts(2531)

[hochan222]

https://kyounghwan01.github.io/blog/TS/object-null/#%E1%84%90%E1%85%A1%E1%84%8B%E1%85%B5%E1%86%B8-%E1%84%83%E1%85%A1%E1%86%AB%E1%84%8B%E1%85%A5%E1%86%AB-%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC-type-assertion

[hochan222]

Optional chaining

optional chaining 연산자 ?. 는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining

[yechoi42]

예시

아래와 같이 deaths-list라는 class를 가진 div를 잡았다고 예시를 들어봅니다. 그리고 div안에 innerHTML 메소드를 이용해 값을 넣어봅니다.

function $(selector: string) {
  return document.querySelector(selector);
}

const deathsList = $(".deaths-list");
deathsList.innerHTML = ""; // Object is possibly 'null'.ts(2531)

저런 에러가 나오는 이유는 간단합니다. 개발자가 볼때는 deathsList는 무조건 dom이 들어간다고 보지만, ts 입장에서는 dom이 있을수도있고, 없을 수도 있기 때문입니다.

해결책은 여러 방법이 있습니다.

옵셔널체이닝 사용

첫번째 방법은 옵셔널체이닝 (?)을 사용하는 방법입니다.

const deathsList = $(".deaths-list");
deathsList?.appendChild(li);
위처럼 deathsList뒤에 ?를 붙여서 사용합니다. 이 코드는 아래 코드와 동일합니다.

deathsList?.appendChild(li) = "";
deathsList ? deathsList.appendChild(li) : null;

deathsList값이 있다면 deathsList.appendChild(li)를 실행하고 아니면 무시하라는 것으로 이해하시면 될 것 같습니다.

타입 단언 사용 (type assertion)

두번째는 타입 단언을 사용하는 방법입니다.

!를 사용하거나 as 키워드를 사용합니다. (둘다 효과는 동일합니다.)

const deathsList = $(".deaths-list");
deathsList!.innerHTML = null; // 타입 단언 ! 사용

// 또는 as를 이용해 강제로 타입을 주입하여 null이 아니라는 것을 ts에게 알려줍니다.
const deathsList = $(".deaths-list") as HTMLDivElement;
deathsList.innerHTML = null; // 타입 단언 ! 사용

[yechoi42]

출처는 맨 위에 호찬씨가 올려준 블로그이고, 자주 참고하게 될 것 같아서 긁어왔습니다.