타입 가드

급변하는 기술 시장에서 살아남기 위해 Typescript 공부를 시작하였습니다...
과연 저는 살아남을 수 있을까요?!

👀 들어가기에 앞서...

지난 번에 인터섹션 타입에 대해 알아본 것에 이어,
이번에는 타입 가드라는 것에 대해 알아보도록 하겠습니다!

👀 타입 가드?

타입 가드는 유니온 타입처럼 타입이 확실하지 않을 때
특정 타입의 경우를 확실하게 처리해주는 일종의 방법을 의미합니다.
이제까지 배운것들과는 달리 정해진 문법이나 키워드가 아닙니다!

아래의 예제를 보면 좀 더 이해가 쉽습니다.

type numberOfString=number|string;

const add=(a:numberOfString, b:numberOfString)=>{
  //타입가드
  if(typeof a==='string' || typeof b==='string'){
    return `${a}${b}`;
  }
  return a+b;
}

위 예제처럼 if문을 사용해 특정 타입에 대한 처리를 해주는 것이
바로 타입 가드입니다.

객체의 경우 조건문과 in을 사용하거나,
각 객체에 공통된 키를 주고 switch와 함께 사용하는 방법도 있습니다.

👀 클래스에서의 타입 가드

원시 타입 뿐만 아니라 객체, 클래스에서도 타입 가드를 사용할 수 있습니다.
원리는 위에서 살펴본 예제와 같은데요,
클래스에서는 타입 가드를 어떻게 사용하는지 또다른 예제를 통해 살펴보도록 하겠습니다.

class Student {
  introduce() {
    console.log('저는 학생입니다');
  }
}

class ITStudent {
  introduce() {
    console.log('저는 IT학부 학생입니다');
  }

  printDepartment(department: string) {
    console.log(`제 학과는 ${department} 입니다.`);
  }
}

type Myself = Student | ITStudent;

const s1 = new Student();
const s2 = new ITStudent();

function introduceMyself(myself: Myself) {
  myself.introduce();
  //타입가드
  if (myself instanceof ITStudent) {
    myself.printDepartment('프론트엔드');
  }
}

introduceMyself(s1); 
//저는 학생입니다.

introduceMyself(s2); 
//저는 IT학부 학생입니다.
//제 학과는 프론트엔드 입니다.

👀 타입 가드를 왜 쓸까요? 정리해봅시다!

위에서 살펴본 예제들처럼
유니언 타입 등을 사용할 때 타입을 확실하게 처리하거나,
특정 속성 메서드가 클래스에서 존재하는지 확인할 때 사용합니다.

원시타입은 typeof를,
객체는 in을,
클래스는 instance of를 활용하여
조건문(또는 switch문)과 같이 사용해 볼 수 있습니다.

😝 마무리

오늘은 타입가드라는 일종의 방법에 대해 알아보았습니다.
내용이 쉽지 않은만큼 이렇게 조금씩 끊어서 포스팅 해보려고 합니다.

저는 다음 시간에도 살아남을 수 있을까요?!😂

• 참고:
  • Typescript 공식문서: https://www.typescriptlang.org/docs/handbook/basic-types.html
  • 【한글자막】 Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS
    https://www.udemy.com/course/best-typescript-21/