TypeScript 느낌표(!) 연산자: non-null 단언

표현식 뒤의 느낌표 value!는 non-null 단언 연산자입니다. 타입에서 null과 undefined를 없애므로 number | undefined를 number처럼 쓸 수 있습니다. 이것은 컴파일러에 대한 약속이지 검사가 아닙니다. 런타임에는 아무 일도 일어나지 않습니다.

const prices = new Map<string, number>([
  ["tea", 2.5],
  ["coffee", 3.2],
]);

const tea = prices.get("tea");         // number | undefined
const coffee = prices.get("coffee")!;  // number

console.log(coffee.toFixed(2)); // 3.20
console.log(tea!.toFixed(2));   // 2.50: ! works on any expression

!가 없으면 tea.toFixed(2)는 오류 TS18048, 'tea' is possibly 'undefined'입니다. !가 있으면 키가 존재한다고 컴파일러에 알렸으므로 코드가 컴파일됩니다.

런타임에 x!가 하는 일: 없음

!는 출력에서 지워집니다. prices.get("coffee")!의 컴파일된 JavaScript는 그냥 prices.get("coffee")입니다. 단언이 틀렸다면 오류는 나중에, 빠진 값이 처음 쓰이는 곳에서 나타납니다.

const prices = new Map<string, number>([["tea", 2.5]]);

try {
  const juice = prices.get("juice")!; // compiles: the ! silences the check
  console.log(juice.toFixed(2));      // TypeError at runtime
} catch (e) {
  console.log((e as Error).message);
}

프로그램은 Cannot read properties of undefined (reading 'toFixed')를 출력합니다. ! 다음 줄에서 멈추는데, 실제 코드에서는 훨씬 멀리 떨어질 수 있습니다. undefined가 객체에 저장되었다가 다른 파일에서 터질 수도 있습니다. 이 거리 때문에 !가 위험합니다.

확정 할당: let x!: T

선언에서 같은 기호는 관련된 다른 뜻을 갖습니다. TypeScript는 변수가 읽히기 전에 대입되는지 추적하지만, 다른 함수 안에서 한 대입은 따라가지 못합니다.

// This does not compile: TypeScript cannot see the assignment inside init()
let config: { port: number };

function init() {
  config = { port: 8080 };
}

init();
console.log(config.port);

index.ts(9,13): error TS2454: Variable 'config' is used before being assigned.

let config!: { port: number };는 확정 할당 단언으로, "읽기 전에 반드시 대입된다"는 뜻입니다. 오류는 해결되지만 x!와 같은 함정이 있습니다. init()이 한 번이라도 건너뛰어지면 읽을 때 undefined를 얻습니다. 대개는 구조를 바꾸는 편이 낫습니다. 예를 들어 init이 객체를 반환하게 하고 const config = init();로 쓰세요.

클래스 속성: prop!: T

strictPropertyInitialization(strict에 포함)이 켜져 있으면 모든 클래스 속성은 선언이나 생성자에서 초기화되어야 합니다. 그렇지 않으면 TS2564를 받습니다: Property 'socket' has no initializer and is not definitely assigned in the constructor. 속성이 나중에 메서드나 프레임워크에 의해 설정된다면, prop!: T로 컴파일러가 받아들이게 할 수 있습니다.

class Connection {
  url: string;
  socket!: { send(msg: string): string }; // set in open(), not in the constructor

  constructor(url: string) {
    this.url = url;
  }

  open() {
    this.socket = { send: (msg) => `sent "${msg}" to ${this.url}` };
  }
}

const c = new Connection("ws://example.com");
console.log(c.socket);            // undefined: declared but not set yet
c.open();
console.log(c.socket.send("hi")); // sent "hi" to ws://example.com

첫 번째 console.log가 빈틈을 보여 줍니다. 타입은 socket이 항상 있다고 하지만, open() 전에는 undefined입니다. 그 시점에 c.socket.send를 호출하면 컴파일은 되고 실행하면 예외가 납니다. 속성이 정말로 없을 수 있다면 socket?: ...로 선언하고 확인하거나, 생성자에서 객체를 만드세요. prop!가 표준 관행인 주된 곳은 생성 이후에 속성을 채우는 프레임워크입니다. Angular의 @ViewChild(...) child!: ChildDirective(ngAfterViewInit이 실행되기 전에 설정됨)나, 행을 불러올 때 라이브러리가 열을 채우는 ORM 엔티티 클래스(MikroORM 문서는 @Property() title!: string이라고 씁니다)가 그렇습니다.

더 안전한 대안

대부분의 !는 컴파일러가 검사하는 코드로, 또는 올바른 자리에서 분명하게 실패하는 검사로 바꿀 수 있습니다.

function must<T>(value: T | null | undefined, what: string): T {
  if (value == null) throw new Error(`missing ${what}`);
  return value;
}

function assertDefined<T>(value: T, what: string): asserts value is NonNullable<T> {
  if (value == null) throw new Error(`missing ${what}`);
}

const env = new Map([["PORT", "8080"]]);

const port = must(env.get("PORT"), "PORT"); // string
console.log(Number(port) + 1);              // 8081

const host = env.get("HOST");
try {
  assertDefined(host, "HOST");
  console.log(host.toUpperCase()); // host is string after the assertion
} catch (e) {
  console.log((e as Error).message); // missing HOST
}

두 헬퍼 모두 !처럼 타입을 좁히지만, 가정이 틀리면 다른 어딘가의 TypeError 대신 그 자리에서 missing HOST를 냅니다. assertDefined는 단언 함수(asserts value is ...)이므로, 호출 뒤에 컴파일러는 host를 string으로 취급합니다. 더 많은 패턴은 타입 가드에 있습니다.

다른 느낌표들

!는 위치에 따라 다른 뜻을 갖습니다.

컴파일 시점에 지워지는 것은 처음 두 가지뿐입니다. !value와 !!value는 런타임에 실행되어 불리언을 반환합니다.