관리 메뉴

Jerry

[TIL] [타임어택9기][리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편 - (8) : 커스텀 타입 가드(is, 형식 조건자) 본문

Front/Typescript

[TIL] [타임어택9기][리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편 - (8) : 커스텀 타입 가드(is, 형식 조건자)

juicyjerry 2024. 2. 29. 00:45
반응형
커스텀 타입 가드(is, 형식 조건자)

 

 

 

 

타입을 구분해주는 커스텀 함수를 직접 만들 수 있다.


리턴값에 is
가 들어가 있는 타입은 커스텀 타입 가드 함수이다.
if문 안에 써서 정확한 타입을 타입스크립트에게 알려줘야 함

그리고 is가 아니면 타입 추론이 안 되는 경우도 있다.

interface Cat { meow: number }
interface Dog { bow: number }

function catOrDog(a: Cat | Dog): a is Dog { 
    // 타입 판별을 여러분이 직접 만드세요.
    if ((a as Cat).meow) { return false }
    return true;
}

const cat: Cat | Dog = { meow: 3 }
if (catOrDog(cat)) { // 커스텀한 타입 가드
    console.log(cat.meow);
} 
if ('meow' in cat) {
    console.log(cat.meow);
}

 

 

 

 

 

 

 

 

실질 예제

Promise가 실행하고 나면 pending에서 seltteld가 된다 (완료지 성공:resolve 혹은 실패:reject가 아님)
promises.then().catch() // 둘다 settled다, 그 중 then만을 resolved, catch를 rejected라고 부르는 것

 

PromiseFulfilledResult에는 PromiseSettledResult PromiseSettledResult

const isRejected = (input: PromiseSettledResult<unknown>): input is PromiseRejectedResult => {
    return input.status === 'rejected';
}
const isFulfilled = <T>(input: PromiseSettledResult<T>): input is PromiseFulfilledResult<T> => {
    return input.status === 'fulfilled';
}

const promises = await Promise.allSettled([Promise.resolve('a'), Promise.resolve('b')]);

 

 

 

 

 

 

 

실패한 것만 필터하고 싶을 경우

const errors = promises.filter(isRejected);
const errors = promises.filter((promise) => promise.status === 'rejected');

 

 

 

 

 

 

위 errors의 promise가 settled가 아닌 rejected가 되게 하고 싶은데 바보 타입스크립트는 넓게 타입 추론해서 캐치하지 못하고 있다. -> 이 때, isReject 구문을 활용

const errors = promises.filter(isRejected); // reject로 바뀜

 

 

 

 

 

 

성공한 것만 필터하고 싶을 경우

const errors = promises.filter(isFulfilled);

export{};

 

반응형