[TypeScript]타입스크립트 느낌표(!) 사용

JavaScript 또는 다른 프로그래밍 언어에서 느낌표(!)는 주로 False를 의미하는 연산자입니다.

 

하지만, TypeScript에서 변수 뒤에 느낌표(!)를 사용하여 다른 용도로 사용할 수 있는데요.

 

Null이 아닌 어선셜 연산자(Non-null assertion operator) 또는 확정 할당 어선셜(Definite Assignment Assertions) 용도로 사용할 수 있습니다.

 

이번 포스팅에서는 TypeScript에서 느낌표(!)가 False의 용도가 아닌 다른 용도로 사용하는 경우를 정리하였습니다.

---

Null이 아닌 어선셜 연산자(Non-null assertion operator)

Null이 아닌 어선셜 연산자는 피연산자가 null이 아니라고 컴파일러에게 전달하여 일시적으로 Null 제약조건을 완화합니다.

 

아래 코드는 느낌표(!)를 사용하지 않는 경우입니다.

interface nameObject {
  firstName: string;
  lastName: string | null;
}

let obj: nameObject = {
  firstName: "Kang",
  lastName: null
};

console.log(obj.lastName.toString());

lastName 프로퍼티가 string과 null 타입으로 설정하였기 때문에 obj.lastName이 null일 가능성이 존재한다는 경고가 발생합니다.

! 연산자를 추가하여 obj.lastName은 값이 무조건 할당되어있다고 컴파일러에게 전달하여 null 제약조건을 완화합니다.

console.log(obj.lastName!.toString());

반응형

---

확정 할당 어선셜(Definite Assignment Assertions)

확정 할당 어선셜은 생소한 용어인데, 쉽게 말하면 값이 무조건 할당되어있다고 컴파일러에게 전달하여 값이 없어도 변수 또는 객체를 사용할 수 있습니다.

 

아래 코드는 느낌표(!)를 사용하지 않는 경우입니다.

let x: number;

console.log(x + x);

변수 x의 값을 number 타입으로 설정 후 값을 할당하지 않고 사용하면 다음 경고문이 출력됩니다.

변수 x를 사용하기 전에 값을 할당해라는 경고입니다.

 

위 코드에서 변수 x의 타입을 설정할 때 : 앞에 ! 연산자를 사용하면 경고문이 사라집니다.

!: 연산자는 컴파일러에게 "변수 x는 값이 무조건 값이 할당되어있으므로 걱정 말고 사용하면 된다."라고 주장합니다.

 

그래서 위 코드는 변수 x의 값이 할당되지 않았는데도 경고가 발생하지 않았습니다.

 

위 코드는 아래 코드로 변경가능합니다.

let x: number;

console.log(x! + x!);

변수 뒤에 ! 연산자를 사용하여 null이 아니라고 확신할 수 있지만 !: 연산자를 사용하여 타입을 정의하는 방법이 더 좋습니다.

 

코드 중간에 ! 연산자가 존재하는 경우 코드의 해석이 어려워지기 때문입니다.

 

확정 할당 어선셜은 변수의 값이 무조건 존재한다는 확신이 있을 경우 사용하면 되겠습니다.