[F-Lab 모각코 챌린지 - 64일차] - 타입스크립트

Big One·2023년 7월 13일
0

F-Lab

목록 보기
37/69

커스텀 타입 가드

반환 타입에? is 가 붙으면 커스텀 타입 가드이다. 타입가드를 사용하지 않으면 타입추론을 제대로 못하는 경우가있는데 이때 사용하면 된다. promise를 예로 들어보겠다. promise는 반환값이 settled 인 프로미스를 반환해주는데 이 안에 resolve, reject 가 있는 것이다. 형식조건자라고도 불리는 것 같다.

const promise1 = Promise.resolve('a');
const promise2 = Promise.resolve('b');
const promise3 = Promise.reject('error !!!');

const promiseResult = await Promise.allSettled([promise1, promise2, promise3]);

// rejected 인 것만 필터링
promiseResult.filter(promise => promise.status === 'rejected');
// 이걸 커스텀 타입가드로 적용하게되면 
const isRejected = (input: PromiseSettledResult<unknown>): input is PromiseRejectedResult => 
input.status === 'rejected';

위 코드가 이해는 갔는데 .. 버전이 달라서 그런지 promiseResult가 PromiseSettledResult 타입이 아닐 뿐더러 allSettled가 사용이 되지 않는다. 일단 큰 범위의 Result타입보다 세부적인 Reject타입을 is 로 설정해주는 것 같다. 그리고 설정할 때 input is가 붙었는데 input 인자를 가리키는건가?

{} 와 Object

{}, Object는 타입이 객체가 아니라 모든 타입이 가능하다는 표현이다. (null, undefined 제외)

객체 타입을 지정할 경우 object를 사용하여야하지만 지양한다. type, interface, class 사용을 지향한다.

참고로 unknown = {} | null | unknown 이다.

const a: unknown = 'hello 모든 타입 가능!';
if(a) {
  a;  // if문에서 null, undefined가 올 수 없으니 a 는 {}로 추론된다.
}else{   
  a;  // if문에서 {} 을 비교했으니 그게 아닌 unknown이다.
}

인덱스드 시그니처, 맵드 타입스

객체의 속성과 값의 타입이 모두 같은 타입으로 설정할 때 번거롭게 일일히 설정하지 않고 인덱스드 시그니처를 통해 모든 값과 속성의 타입을 통일시킨다.

//적용전
type A = {a: number, b: number, c: number, d: number};
// 적용 후
type A = {[key: string]: number}; 
// 프로퍼티의 속성을 원하는 타입으로 제한하고 싶을 때 
type B = 'Human' | 'Mammal' | 'Animal'; // | 사용할 때 type만 가능함 interface (x)
type A =  { [key in B]: number } //맵드 타입스 적용
const a: A = {Human: 1, Mammal: 2}
profile
이번생은 개발자

0개의 댓글