[타입스크립트] 느낌표와 물음표

⁉️ Typescript에서의 느낌표와 물음표?

React-Redux에서 Typescript를 사용하다 보니, 초기값 설정 때문인지 state가 내가 의도한 상태 (배열, 오브젝트 등등)가 되기 전까지는 아래와 같은 타입스크립트 에러가 발생하는 현상을 자주 겪었다.

위의 사진을 보면, 나는 currentUser의 초기값(initailState)을 null로 지정해줬고, 특정 action이 발동 됐을 때만 currentUser state가 오브젝트 형태로 업데이트 되도록 했다. 이 때문에 currentUser가 특정 값으로 업데이트 되기 전까지는 null이기 때문에, 위와 같은 오류가 발생하는 것이었다.

이런 경우, 느낌표(!) 또는 물음표(?)를 사용하면 문제가 깔끔하게 해결됐기에 이를 자주 사용했다.
하지만 그동안 이를 사용하며 정확히 어떤 의미인지, 무엇 때문에 오류가 해결되는지에 대해서는 확실히 짚고 넘어가지 못했기 때문에 이를 블로그에 정리해보고자 한다.

---

❗️ 느낌표

느낌표(!)는 값이 무조건 할당 되었으니, 또는 무조건 할당 될 것이니** null이나 미할당의 문제를 넘어가라고 컴포넌트에 명령을 내리는 것과 같다고 생각하면 된다.

이를 nullable이라고 하는데, null값 또는 undefined를 허용하도록 하겠다는 것과 같다고 볼 수 있다. 아래의 코드 예시를 봐보자.

코드 예시

이 경우 세 번째 isOwner를 사용하기 위해선, 해당 값이 할당 될 것이라고 컴포넌트에 미리 언질을 줘야한다. 만약 그렇지 않으면 isOwner 내에 사용된 currentUser.userId는 null이 될 수도 있는 가능성이 존재하기에, 타입스크립트는 에러를 출력할 것이다.

---

❓ 물음표

타입을 지정해줄 때, “프로퍼티의 값이 있을 수도 있고 없을 수도 있어!” 라고 선언해주는 것과 같다고 생각하면 쉽다.

이를 optional이라고 한다. 즉, 내가 선언한 타입이 필수적으로 입력 및 사용되어야 하는 프로퍼티가 아님을 의미한다. 아래 예시를 확인해보자!

코드 예시

위 예시에서 볼 수 있듯이, aboutMe에 분명 Person이라는 인터페이스를 선언했으나, age가 포함되지 않았는데도 어떠한 오류도 발생하지 않는다. 이는 Person 인터페이스의 age에 물음표(optional)을 선언해줬기 때문이다.

nullable과 같은 역할을 하기도 한다.

내가 null.length나 null.filter() 등을 사용하고자 할때 활용할 수 있다. 즉, 내가 사용하고자 하는 값이 null 또는 undefined여도 일단 에러 없이 코드를 실행시킬 수 있는 것이다.

---