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

forEach 타입 직접 만들기

 

 

 

 

Tip

타입을 처음부터 완벽하게 예상하고 만들기는 어려우니, 

처음에는 코드에서 에러가 없을 정도로 타입핑하고 타입이 업데이트 될 때마다 타입도 같이 업데이트 해주면 된다

 

 

 

 

 

커스텀 함수 "forEach" 만들기

// type checking & defining custom types
interface Arr<T> {
    forEach(callback: (item: T, index: number) => void): void;
}

const a: Arr<number> = [1, 2, 3];
a.forEach((item, index) => {
    console.log(item, index);
    item.toFixed(1);
})
a.forEach((item) => {
    console.log(item);
    return '3';
})

const b: Arr<string> = ['1', '2', '3'];
b.forEach((item) => {
    console.log(item);
    item.charAt(3);
})
b.forEach((item) => {
    console.log(item);
    return '3';
})

const c:Arr<string | number> = ['1', 2, '3'];
c.forEach((item) => {
    console.log(item);
})
c.forEach((item) => {
    console.log(item);
    return '3';
})

 

 

먼저, 

interface Arr<T> {
    forEach(callback: (item: T, index: number) => void): void;
}

 

Arr라는 제네릭 인터페이스 생성

<T>는 제네릭 타입 사용

Arr<T> 인터페이스는 제니릭 타입 사용으로 다양한 타입 요소를 가진 구조를 활용할 수 있음

Arr 타입의 속성

forEach 메소드는 각 요소에 callback 함수를 실행하는 역할

파라미터를 item과 index를 받음
return value는 없음

 

 

 

 

 

다음,

const a: Arr<number> = [1, 2, 3];
a.forEach((item, index) => {
    console.log(item, index);
    item.toFixed(1);
})
a.forEach((item) => {
    console.log(item);
    return '3';
})

 

a: Arr<number>는 숫자 배열을 나타냄

첫번째 forEach문은 각 요소와 인덱스 출력과 요소들의 자리수를 소수점 아래 한 자리로 포맷

 

 

두번째 forEach문은 요소 출력과 문자열 3을 리턴

하지만, forEach 메소드에 의해 무시됨 (return void)

 

 

 

 

다음,

const b: Arr<string> = ['1', '2', '3'];
b.forEach((item) => {
    console.log(item);
    item.charAt(3);
})
b.forEach((item) => {
    console.log(item);
    return '3';
})

b: Arry<string>은 문자열 배열 나타냄

첫번째 forEach문은 각 요소 출력 및 요소의 4번째 인덱스 값 가져옴'

 

 

첫번째 forEach문은 각 요소 출력 및 문자 '3'을 리턴한다. 

하지만 a예제와 마찬가지로 메소드에 의해 리턴값은 무시됨

 

 

 

 

 

다음, 

const c:Arr<string | number> = ['1', 2, '3'];
c.forEach((item) => {
    console.log(item);
})
c.forEach((item) => {
    console.log(item);
    return '3';
})

c:Arr<string | number>는 문자열과 숫자가 존재하는 배열

첫번재 forEach는 각 요소를 출력

두번째 forEachsms 각 요소를 출력 및 문자 '3'을 리턴하지만 무시