[TypeScript] 타입 가드로 매개변수의 타입을 구분하여 메서드 적용하기

매개변수에 number 타입과 string타입이 들어오게 되는데,

number가 들어올 경우 소수점 한자리까지만 남기려고 한다.

 

function numOrStr(a: number | string) {
  a.toFixed(1);
}

하지만 타입스크립트는 모든 경우를 고려하기 때문에 string이 매개변수로 들어올 경우 toFixed를 사용할 수 없어 오류가 난다.

 

as를 사용해서 매개변수 a를 강제로 타입을 지정해주는 방법이 있다.

function numOrStr(a: number | string) {
  (a as number).toFixed(1);
}

하지만 이렇게 하면 a가 숫자라고 단정을 짓는것이기 때문에 위험한 코드이다.

다른 개발자가 틀린 코드를 작성했을 때만 사용하는것이 좋다.

 

이 경우는 타입 가드를 활용했더니 해결했다.

 

 

 

---

 

타입가드

데이터가 될 수 있는 타입이 여러 개일 때 조건문을 통해 데이터의 타입을 정확하게 구분하는 것이다.

자바스크립트에서 사용했던 if문을 사용하면 해결된다.

 

function numOrStr(a: number | string) {
  if (typeof a === 'string') {
    a.split(',');
  } else {
    a.toFixed(1);
  }
}

typeof를 활용하여 a의 타입에 따라 다른 메소드를 사용할 수 있도록 조건문을 사용한다.

 

 

매개변수에 없는 타입을 조건으로 하면 어떻게 될까?

function numOrStr(a: number | string) {
  if (typeof a === 'string') {
    a.split(',');
  } else {
    a.toFixed(1);
  }
  if (typeof a === 'boolean') {
    a.toString();
  }
}

매개변수에 없는 boolean값을 넣었더니 a의 타입은 절대 나올 수 없는 값으로 never가 되었고 에러가 났다.

 

function numOrNumArray(a: number | number[]) {
  if (Array.isArray(a)) {
    a.concat(4);
  } else {
    a.toFixed(3);
  }
}

배열을 확인할 경우는 typeof가 아닌 isArray로 배열이 맞는지 아닌지 확인한다.

 

 

 

원시값	배열
typeof	isArray

원시값일 경우 타입 확인은 typeof로 배열일경우에는 isArray로 사용한다.

 

 

 

---

 

 

class 타입 가드

 

class를 사용할때는 어떻게 구분해야할까.

class A {
  aaa() {}
}

class B {
  bbb() {}
}

function aOrB(param: A | B) {
  if (param instanceof A) {
    param.aaa();
  }
}

class A와 B가 있다.

매개변수로 A 또는 B가 들어왔을 때 instanceof를 통해 A의 인스턴스인지 확인한다.

 

 

 

---

 

 

객체를 구분 방법

객체를 구분하는 방법에는 두가지가 있다.

 

type D = { type: 'd'; ddd: string };
type E = { type: 'e'; eee: string };
type F = { type: 'f'; fff: string };

객체는 키와 값으로 존재하게 되는데,

3개의 객체를 만들었을 때 type의 키는 전부 같지만 값이 다른 경우와 키가 전부 다르지만 값이 같은 경우가 있다.

 

 

- 1.  키는 전부 같지만 값이 다른 경우

function typeCheck(a: D | E | F) {
  if (a.type === 'd') {
    a.ddd; // a: D로 추론
  } else if (a.type === 'e') {
    a.eee; // a: E로 추론
  } else {
    a.fff; // a: F로 추론
  }
}

객체간의 타입 구별은 키의 값으로 가능하다.

 

 

- 2. 키가 전부 다르지만 값이 같은 경우

function typeCheck(a: D | E | F) {
  if ('ddd' in a) {
    a.type;
  } else if ('eee' in a) {
    a.type;
  } else {
    a.type;
  }
}

in을 사용하여 키를 구분한다.