답변.

Non-Null Assertion Operator (!)는 TypeScript에서 컴파일러에게 "나는 이 시점에서 변수가 null 또는 undefined가 아님을 알고 있다"고 명시적으로 말할 수 있는 특별한 구문입니다. 이 연산자는 프로그래머가 값의 존재를 확신하지만 TypeScript가 그거를 보장할 수 없는 시나리오에서 타입 문제를 해결하기 위해 추가되었습니다.

질문의 역사

TypeScript는 변수가 null 또는 undefined일 가능성에 대해 엄격하며, 특히 strictNullChecks 옵션이 활성화된 경우 그렇습니다. 프로그래머가 값의 안전성을 확신하는 상황에서 컴파일러 경고를 없애기 위해 non-null assertion이 도입되었습니다.

문제

TypeScript는 항상 모든 코드 분기를 추적하고 조건이 null이 아닐 것임을 이해하지 못할 수 있습니다. 이는 비동기 코드, 콜백 및 DOM 요소를 처리할 때 자주 발생합니다.

해결책

Non-Null Assertion Operator (!)는 특정 위치에서 null/undefined의 부재를 컴파일러에게 알리며 타입 오류를 제거합니다.

코드 예시:

function processUser(user?: {name: string}) {
  // TS는 연산자가 없으면 오류를 발생시킵니다: user는 undefined일 수 있습니다.
  console.log(user!.name); // 연산자 ! 는 user가 정의되어 있다고 약속합니다.
}

주요 특징:

컴파일 시간 오류만 제거하며, 런타임 로직에는 영향을 미치지 않습니다.
값의 non-null성 보장이 확실한 경우에만 사용됩니다.
과다하거나 무의식적인 사용은 런타임 오류로 이어질 수 있습니다.

함정 질문.

모든 값의 모든 유형에 대해 ! 를 사용할 수 있습니까? 예: let x: number = y!

연산자 !는 컴파일러가 판단하는 null/undefined를 포함할 가능성이 있는 타입에 대해서만 의미가 있습니다. nullable이 없는 엄격한 타입을 위한 변수에는 효과가 없습니다.

!는 null/undefined 체크를 완전히 대체합니까? 런타임 체크를 수행해야 합니까?

아니요, 연산자 !는 실행 시간 검사를 수행하지 않습니다. 이는 오직 컴파일러에만 도움을 주며, 실제 값이 undefined/null이 되면 런타임 오류가 발생합니다.

function foo(data?: string) {
  // 오류를 초래할 수 있습니다.
  alert(data!.length);
}

!이 비동기 코드에서 원래 변수가 다른 스레드에서 변경되는 경우 오류를 방지할 수 있습니까?

아니요. 연산자 !는 적용 지점에서만 작동합니다. 검사와 사용 사이에 값이 undefined가 되면 오류를 피할 수 없습니다. 항상 non-null성의 최신 상태를 확신해야 합니다.

전형적인 오류 및 안티 패턴

값의 존재 여부에 확신이 없을 때 오류를 "억제"하기 위해 !를 사용하는 것.
실제 맥락을 이해하지 못한 채 무차별적으로 사용하는 것.
required 타입이거나 확실한 런타임 검사 있는 곳에서 !를 사용하는 것.

실생활 예제

부정적 케이스

React 컴포넌트 내에서 미리 검사 없이 ! 연산자를 통해 ref를 통해 DOM에 접근:

const ref = useRef<HTMLDivElement>(null);
ref.current!.focus(); // ref.current가 null일 경우 런타임 오류 발생

장점:

컴파일 오류 억제.

단점:

존재하지 않는 요소에 접근할 경우 치명적인 런타임 오류 발생 가능성.

긍정적 케이스

적용하기 전에 존재 여부를 확인:

if (ref.current) {
  ref.current.focus();
}