타입스크립트(TypeScript) - '?' , '!' 의 의미는 무엇일까?

타입스크립트 타입 정의를 보다보면 종종 ?과 !를 볼 수 있습니다.

주로 자바스크립트를 써서 개발하던 저에게는 조금은 생소한 표현식이라 구체적으로 무엇인지 찾아보았습니다.

 

개념

!와 ?는 변수가 값의 존재 여부와 관련된 키워드로, 코드에서 안정성과 가독성을 높이기 위해 사용됩니다.

!

• 값이 null이나 undefined가 아님을 확신할 때 사용합니다.
• 타입스크립트는 변수에 null이나 undefined가 들어갈 가능성이 있으면 경고를 주지만, !를 붙이면 "이 값은 절대 null이나 undefined가 아니야! 라고 컴파일러에게 전달(?)하는 역할을 합니다.

let value: string | undefined;
value!; // 이 시점에 undefined가 아님을 보장하지만 실제로 undefined일 경우 런타임에서 에러가 발생

?

• 값이 있을 수도 있고 없을 수도 있음을 나타냅니다.
• 객체의 속성 또는 함수의 파라미터가 선택적일 때 사용합니다. 즉, 해당 속성이나 파라미터가 없어도 에러가 발생하지 않습니다.

예시) 객체의 속성

interface User {
  name: string;
  age?: number; // 선택적 속성
}

const user1: User = { name: "Yang" }; // age는 선택적 속성으로 없어도 에러 x
const user2: User = { name: "Kim", age: 20 };

예시) 파라미터

function greet(name: string, age?: number) {
  console.log(`Name : ${name}`);
  if (age !== undefined) {
    console.log(`Age : ${age}`);
  }
}

greet("Yang"); // O
greet("Kim", 30); // O

정리

• !는 값이 null이나 undefined가 아님을 강제합니다.
• ?는 값이 선택적임을 의미하여 없을 수도 있음을 나타냅니다.