타입 가드(type guard) 이란?

타입가드(type guard)는여러 개의 타입으로 지정된 값을 특정 위치에서 원하는 타입으로 구분하는 것을 의미합니다.

넓은 타입에서 좁은 타입으로 타입의 범위를 좁힌다는 의미로도 볼 수 있습니다.

타입 가드의 필요성

아래 코드는 타입 가드가 필요한 상황입니다.

파라미터의 타입으로 number, string 타입을 받고있습니다. 이런 경우 만약 파라미터인 text에서 string 메소드인 .split()를 사용하려고 하거나 number 메소드인 .toFixed() 메소드를 사용하려고 하면 에러가 발생합니다. 에러 발생원인은 text가 number, string 타입에서 모두 접근가능한 타입의 속성과 API만 접근가능하기 때문입니다.

function consoleText(text: number|string) {
    // 타입 에러 발생 : 두 가지 타입에 공통적으로 없는 메서드
	text.split();
    text.toFixed(2);
}

아래 코드는 타입 가드를 사용하여 타입 에러를 해결한 코드입니다.

아래와 같이 typeof 연산자를 사용하여 타입을 비교하는 타입 가드를 사용하여 타입의 범위를 좁혀 각각의 해당되는 메서드를 사용가능하게 합니다.

여기서는 typeof 연산자를 이용하여 타입 가드를 구현하였습니다. typeof 연산자 이외 타입 가드를 구현하는 문법을 아래에서 살펴보겠습니다.

function printText(text: number|string) {
    // 타입 가드를 통해 타입의 범위를 좁힘
    if (typeof text==="string") {
      text.split();
    }  else if (typeof text==="number"){
      text.toFixed(2);
    }

}

타입 가드 문법

1 ) typeof 연산자

typeof 연산자는 자바스크립트에서 사용하는 연산자와 동일한 연산자로 특정 코드의 타입을 문자열 값으로 반환해 줍니다. 이를 이용하여 타입가드를 구현합니다.

function printText(text: number|string) {
    // 타입 가드를 통해 타입의 범위를 좁힘
    if (typeof text==="string") {
      text.split();
    }  else if (typeof text==="number"){
      text.toFixed(2);
    }

}