document.getElementById("id")는 null일 수 있습니다.

document.getElementById("id")는 null일 수 있습니다.

편집: TypeScript v2.2.1을 사용하고 있습니다.

나는 TypeScript가 처음이고 존재할 수도 있고 없을 수도 있는 DOM 요소를 다루는 가장 깨끗한 방법이 무엇인지 잘 모르겠습니다.기본적으로 요소가 존재하는지 확인한 다음 존재하면 이벤트 수신기를 추가합니다.--strict_null_checks설정됨).

JS와 같은 방식으로 할 때:

const myElement = document.getElementById('my-id');
if (myElement) {
  myElement.addEventListener('click', (e:Event) => {
    // Do stuff.
  });
}

나는 오류를 이해합니다.my_script.ts(3, 3): error TS2531: Object is possibly 'null'.

null이 아닌 주장을 사용하여 이 문제를 해결할 수 있습니다.

const maybeMyElement = document.getElementById('my-id');
if (maybeMyElement) {
  const myElement = maybeMyElement!;
  myElement.addEventListener('click', (e:Event) => {
    // Do stuff.
  });
}

하지만 제가 이해하는 바로는 그런 주장들은 일반적으로 눈살을 찌푸리게 됩니다. 그리고 미학적으로, 저는 두 배의 변수를 만드는 것을 좋아하지 않습니다.

더 깨끗한 방법이 있을까요?

변수를 입력해야 합니다.나는 많은 것을 하지 않았습니다.const하지만 당신의 두 번째 옵션은 명백하게 잘못된 것 같습니다(코드 변환).

변수를 엄격하게 입력하면 경고를 피할 수 있습니다.컴파일러는 현재 이것을 다음과 같이 봅니다.

const myElement: HTMLElement = document.getElementById('my-id');

null로 변경하면 null이 허용됩니다.

const myElement: HTMLElement | null = document.getElementById('my-id');

업데이트됨

두 번째 옵션(내가 시도하지 않은 것):!https://stackoverflow.com/a/40640854/2084315 에 따라 잠재적으로 null인 작업이 종료될 때

const myElement = document.getElementById('my-id')!;

선택적 체인 "?"을 사용합니다.

TypeScript 버전 3.7+를 시작하는 중 옵션 체인을 사용할 수 있습니다.

const maybeMyElement = document.getElementById('my-id');
maybeMyElement?.addEventListener('click', (e: Event) => {
  // Do stuff.
  console.log(e);
});

이전 버전의 TypeScript의 경우 다음과 같은 작업을 수행합니다.

const maybeMyElement = document.getElementById('my-id') as HTMLElement;
maybeMyElement.addEventListener('click', (e: Event) => {
  // Do stuff.
  console.log(e);
});

참고: null이 아닌 어설션 연산자(!)보다 옵션 체인(??)이 항상 선호됩니다. null이 아닌 어설션은 실제로 값이 null이거나 정의되지 않은 경우 실행 시간 오류로 이어질 수 있기 때문입니다.

또한 eslint 설정에 "plugin:@typescript-eslint/recommended"가 구성되어 있으면 코드에 "Forbidden non-null Assertion" 경고가 표시됩니다.

다음을 사용해 보십시오.

if (!!myElement) {
    myElement.addEventListener('click', (e:Event) => {
        // Do stuff.
    });
}

그!!개체 표현식을 부울로 강제 지정합니다.그것은!연산자를 두 번 누릅니다.자세한 내용은 다음 답변을 참조하십시오.

외부 JS 파일을 참조하여 사용하는 경우 스크립트 구문에 "derfer"를 추가해 보십시오.예:

<script src="./script.js" defer></script>

언급URL : https://stackoverflow.com/questions/43218680/document-getelementbyidid-may-be-null