[TIL] [타임어택9기][리뉴얼] 타입스크립트 올인원 : Part2. lib.es5.d.ts 분석- (14) : filter 타입 직접 만들기

map 타입 직접 만들기

 

 

 

 

 

Tip 타입 업그레이드하면서 코드를 추가 해준다 

 

filter 메소드에 오버로딩을 추가하면서 타입 업그레이드 하는 법

interface Arr<T> {
    filter(): void; // (1)
    filter(callback() => void): void; // (2)
    filter(callback: (v: T) => void): void; // (3)
    filter(callback: (v: T) => Boolean): T[]; // (4)
    filter(callback: (v: T) => v is T): T[]; // (5)
    filter<S>(callback: (v: T) => v is S): S[];  // (6)
    filter<S extends T>(callback: (v: T) => v is S): S[];  // (7)
}

const a: Arr<number> = [1, 2, 3]; // (8)
const b = a.filter((v): v is number => v % 2 === 0); // [2] number[] // (9)
const c: Arr<number | string> = [1, '2', 3, '4', 5]; // (10)
const d = c.filter((v): v is string => typeof v == 'string'); // ['2', '4'] string[] // (11)

const predicate = (v: number | string): v is number => typeof v === 'number'; // (12)
const e = c.filter(predicate); // [1, 3, 5] number[] // (13)

 

interface Arr<T>이란 Arr명을 가진 제네릭 인터페이스 정의

 

1번 코드는 아무 값도 받지 않고 아무 값도 반환 타입 없음

 

2번 코드는 인자로 callback함수를 받으며 반환 타입 없음

 

3번 코드는 인자로 각 요소에 대해 callback 함수를 받으며 반환 타입 없음

 

4번 코드는 인자로 각 요소에 대해 callback 함수를 받으며 그 결과가 "참"값 요소에 대한 새 배열을 반환

 

5번 코드는 인자로 각요소에 대한 callback 함수를 받아 그 결과가 참인 경우 새 배열을 반환하는 값으로, 

사용자 정의 타입 가드 사용하여 콜백함수 타입을 좀 더 명확하게 표현(v가 T 타입임을 확실히 알 수 있음)

 

6번 코드, 7번 코드는 제네릭 타입 'S'를 사용하여 콜백 함수가 특정 서브 타입에 대한 타입 가드 역할을 할 때, 그 서브 타입 배열을 반환할 수 있게 함(타입 정보 좁혀나감;narrowing)

 

 

 

 

 

 

 

8번 코드~ 13번 코드는 filter 메소드 사용 예시

8번 코드는 배열 요소 타입이 숫자형인 Arr 배열을 나타냄

 

9번 코드는 짝수 필터링

 

10번 코드는 배열 요소 타입이 숫자형과 문자형인 Arr를 나타냄

 

11번 코드는 문자열 타입 요소 필터링

 

12번 코드는 predicate 함수 사용하여 숫자 타입 필터링(사용자 정의 타입 가드)