typescript 기초 - 3

정태호·2023년 7월 11일

타입스크립트

목록 보기
3/13
post-thumbnail

편리하게 Narrowing 하기

  1. union 타입 처리
  2. 복잡한 object 자료들 처리
  3. class로 생성된 object 자료들 처리

null, undefined 처리

개발을 하다보면 조건문으로 null과 undefined 값이 들어오면 어떻게 해주세요 라는 식으로 대처할 일이 빈번하다.

&& 연산자로 if문을 생략할 수 있다?

  • 내가 아는 && 연산자는 and -> 둘 다 참이면 이렇게 해주세요~
  • && 연산자의 다른 기능

&& 기호로 비교할 때 true와 false 값을 넣는게 아니라 자료형을 넣으면 && 사이에 처음으로 등장하는 falsy 값을 찾아주고 그게 없다면 마지막 값을 남겨준다. fasly 란 null, undefined, NaN 같은 값들을 의미한다.

1 || 2 -> 1 반환
0 || 2 -> 2 반환
1 && 2 -> 2 반환
0 && 2 -> 0 반환
1 && null && 2 -> null 반환
undefined && 'hello' && 'world' -> undefined 반환
function result(word : string | undefined){
	if(word && typeof word === 'string'){
		console.log(word)
	}
}

위 코드로 보자면 word가 undefined 값이라면 조건문이 false가 되어 실행되지 않는다.

Object 자료형의 in Narrowing

  • 서로 배타적인 속성을 가지고 있다면 in으로 Object 자료형을 Narrowing 할 수 있다.
  • (키값 in object자료이름) 이 속성을 가지고 있냐~
type Bird = { flying: string };
type Tiger = { work: string };

function 함수(animal: Bird | Tiger) {
  if ("flying" in animal) {
    return animal.flying
  }
  return animal.work
} 

같은 속성을 가지고 있다면?

  • literal type을 사용하자!
  • 구분이 되는 literal type으로 유니크한 속성을 만들어놔도 된다!!
type Bird = {
	leg: "2개";
	name: string;
};
type Tiger = {
	leg: "4개";
	name: string;
};

function result(animal: Bird | Tiger) {
	if (animal.leg === "2개") {
		console.log("이것은 Bird");
	} else {
		console.log("이것은 Tiger");
	}
}

Class로 생성된 object 라면 instanceof

  • instanceof를 사용하여 부모 클래스가 뭔지 검사할 수 있다.
  • instanceof를 통해 이 클래스에서 온 것인지 아님 다른 클래스에서 온 것인지 구분할 수 있기 때문에 Narrowing 처리 가능하다.
const day = new Date();
if (day instanceof Date){
  console.log('Date 클래스 안에 day가 있습니다.')
}
profile
주니어 프론트엔드 개발자가 되고 싶습니다!

0개의 댓글