Type Guard

• Type guard를 사용하면 조건문에서 객체의 타입을 좁혀나갈 수 있음

📄 built-in Guard

• 자바스크립트에 존재하는 typeof, instanceof 연산자를 사용하여 Type Guard

typeof 연산자

• 피연산자 타입을 판단하여 문자열로 변환

function checkNumberOrString(value: number | string) {
if (typeof value === 'string') {
    // value가 string type임을 보장
    value.split(':');  
  } else {
    // 아닌 경우 number type임을 보장
    value.toFixed(2);
  }
}


function checkNumberOrNumberArray(value: number | number[]) {
  if (Array.isArray(value)) {
    // value Array type 여부 체크
    value.slice(1);  
  } else {
    value.toFixed(1);
  }
}

instanceof 연산자

• 판별할 객체가 특정한 클래스에 속하는지 확인

class Person {
  name: string;
  age: number; 
}

class Animal {
  type: string;
}

function checkFunc(value: Person | Animal) {
  if (value instanceof Person){
    console.log(value.name);
    console.log(value.age);
  }else{
    console.log(value.type);
  }
}

const person = new Person();
checkFunc(person);

📄 in

• 객체 내부에 특정 프로퍼티가 존재여부를 확인하는 연산자

interface A {
  x: number;
}

interface B {
  y: string;
}

function testFunc(value: A | B) {
  if ('x' in value){
    // value : A
  }else{
    // value : B
  }
}

📄 리터럴 Type Guard

• 리터럴 값인 경우 === / == / !== / != 연산자를 통해 타입을 구분

type AnswerState = 'yes' | 'no' | 'unknown';

function checkAnswer(state:AnswerState) {
  if(state == 'yes'){
    console.log('yes');
  } else if (state == 'no'){
  	console.log('no');
  } else {
  	console.log('unknown');
  }
}

• union type에 리터럴 타입이 있는 경우 동일하게 적용
  공통 프로퍼티 값을 비교해 union 타입 구분

type Question = {
  type: 'question',
  questionType: string
}

type Answer = {
  type: 'answer',
  answerType: string
}

function checkQuestionAnswer(value: Question | Answer) {
  if (value.type === 'question'){
    console.log(value.questionType); // success
    console.log(value.answerType); // error
  }else{
    console.log(value.questionType); // error
    console.log(value.answerType); // success
  }
}

📄 null, undifined (strictNullChecks)

• value == null / != null로 null 과 undefined를 모두 걸러낼 수 있음

	function checkFnc(value?: number | null) {
      if (value === null) return ;
      // value는 number
    }

📄 사용자 정의 Type Guards

• javascript 객체
  사용자 정의 Type Guard 함수란 단순히 어떤 인자명은 어떠한 타입 이다라는 값을 리턴하는 함수

interface Item {
  name: string;
  common: string;
}

interface SetItem {
  setting: number;
  common: string;
}

/**
 * 사용자 정의 Type Guard!
 */
function isItem(arg: any): arg is Item {
  return arg.name !== undefined;
}

/**
 * 사용자 정의 Type Guard 사용
 */
function doFunc(arg: Item | SetItem) {
  if (isItem(arg)) {
    console.log(arg.name); // Success
    console.log(arg.setting); // Error!
  }
  else {
    console.log(arg.name); // Error!
    console.log(arg.setting); // Success
  }
}

doFunc({ name: '1234', common: '123' });
doFunc({ setting: 123, common: '123' });

https://radlohead.gitbook.io/typescript-deep-dive/type-system/typeguard