map, forEach 메서드 타입 정의하기

한 입 크기로 잘라먹는 타입스크립트 - map, forEach 메서드 타입 정의하기


제네릭 함수를 이용하면 매개변수의 타입이 배열, 함수, 객체, 클래스 등 타입을 유연하게 잘 정의활 수 있다.

- chapter2.ts

/**
 * map 메서드
 */
const arr = [1, 2, 3];
// map : 배열의 각 요소에 callback 함수를 실행하여 반환값들을 모아 새로운 배열로 반환
const newArr = arr.map((it) => it * 2); // [2, 4, 6]
// map 메서드를 Ctrl 키를 누르고 따라가면 lib.es5.d.ts 에 존재함

// 2개의 타입변수 활용하여, 직접 map 메서드 정의하여 사용
function map<T, U>(arr: T[], callback: (item: T) => U) {
    let result = [];
    for (let i = 0; i < arr.length; i++) {
        result.push(callback(arr[i]));;
    }
    return result;
}

map(arr, (it) => it * 2); // number
map(['hi', 'hello'], (it) => it.toUpperCase()); // string
// map(['hi', 'hello'], (it) => parseInt(it)); // 함수 타입변수가 T 1개만 있을 때 오류


/**
 * forEach
 */
const arr2 = [1, 2, 3];
// forEach : 배열의 각 요소의 인수로 전달한 callback 함수를 1번씩만 수행
arr2.forEach((it) => console.log(it));
// forEach 메서드를 Ctrl 키를 누르고 따라가면 lib.es5.d.ts 에 존재함

// 직접 forEach 메서드 정의하여 사용
function forEach<T>(arr: T[], callback: (item: T) => void) {
    for (let i = 0; i < arr.length; i++) {
        callback(arr[i]);
    }
}

forEach(arr2, (it) => {
    console.log(it.toFixed());
}); // number

forEach(['123', '456'], (it) => {
    it;
}); // string

참고링크 : https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8#

한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의 | 이정환 Winterlood - 인프런