인프런 강의 - 한 입 크기로 잘라먹는 타입스크립트 (제네릭)

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

 

📌 제네릭 소개

// ✅ 제네릭 함수 (Generic Function)
// 함수의 매개변수와 반환값의 타입을 유연하게 처리할 수 있도록 해줌
function func<T>(value: T): T {
    return value;
}

// 사용 예시
let num = func(10);
let bool = func(true);
let str = func("string");

// T를 [number, number, number] 튜플로 직접 지정한 예시
let arr = func<[number, number, number]>([1, 2, 3]);

 

📌 타입 변수 응용하기

// ✅ 제네릭 타입 변수 응용

// 사례 1: 타입 변수를 2개 사용하는 경우
// → 서로 다른 타입의 두 값을 받아 순서를 바꿔 반환하는 함수
function swap<T, U>(a: T, b: U) {
    return [b, a];
};

const [a, b] = swap("1", 2);

// 사례 2: 배열을 받아 첫 번째 값을 반환하는 함수
// → 일반적인 배열 타입을 받아 첫 번째 요소 반환
function returnFirstValue<T>(data: [T, ...unknown[]]) {
    return data[0];
}

let num = returnFirstValue([0, 1, 2]);
let str = returnFirstValue([1, "hello", "my", "name", "is"]);

// 사례 3: 타입 제한 (Constraint)
// → length 프로퍼티를 가진 타입만 받을 수 있도록 제한
function getLength<T extends { length: number }>(data: T) {
    return data.length;
}

let var1 = getLength([1, 2, 3]);
let var2 = getLength("12345");
let var3 = getLength({length: 10});

 

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

// ✅ map 메서드
// 배열의 각 요소에 콜백 함수를 실행한 결과를 새 배열로 만들어 반환
const arr = [1, 2, 3];
const newArr = arr.map((it) => it * 2);

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);
map(["hi", "hello"], (it) => it.toUpperCase());
map(["1", "2", "3"], (it) => parseInt(it));

// ✅ forEach 메서드
// 배열의 각 요소에 대해 콜백 함수를 실행하지만 값을 반환 X
const arr2 = [1, 2, 3];
arr2.forEach((it) => console.log(it));

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()); 
});

forEach(["123", "456"], (it) => {
    it;
})

 

📌 제네릭 인터페이스 & 제네릭 타입 별칭

// ✅ 제네릭 인터페이스
interface KeyPair<K, V> {
    key: K;
    value: V;
};

// 사용 시에는 반드시 꺽쇠(<>)를 사용하여 타입을 명시
let keyPair: KeyPair<string, number> = {
    key: "key",
    value: 0,
};

let keyPair2: KeyPair<boolean, string[]> = {
    key: true,
    value: ["1", "2"],
};

// ✅ 인덱스 시그니처와 제네릭 인터페이스
// 기존 방식: 값 타입이 고정된 객체
interface OriginalMap {
    [key: string]: number;
};

let originalMap: OriginalMap = {
    key: 1,
    key2: 2
};

// 제네릭 방식: value 타입을 유연하게 설정 가능
interface GenericMap<V> {
    [key: string]: V;
};

let genericMap: GenericMap<string> = {
    key: "value",
};

let genericMap2: GenericMap<boolean> = {
    key: true,
};

// ✅ 제네릭 타입 별칭
// 인터페이스와 거의 동일한 구조지만 type 키워드로 정의
type MyMap<V> = {
    [key: string]: V;
};

let myMap: MyMap<string> = {
    key: "hello",
}

 

📌 제네릭 클래스

// ✅ 제네릭 클래스
class List<T> {
    constructor(private list: T[]) {}

    push(data: T) {
        this.list.push(data);
    }

    pop() {
        return this.list.pop();
    }

    print() {
        console.log(this.list);
    }
};

const numberList = new List([1, 2, 3]);
numberList.pop();
numberList.push(4);
numberList.print();

const stringList = new List(["1", "2"]);
stringList.push("hello");

 

📌 프로미스와 제네릭

// ✅ Promise
// 자바스크립트에서 Promise는 비동기 작업을 처리할 때 사용하는 객체이며,
// 타입스크립트에서는 Promise가 제네릭으로 구현되어 있어 결과값의 타입을 명확히 지정 가능

// 아래 예제에서는 3초 후에 숫자 20을 반환하는 Promise를 생성
// resolve는 작업이 성공했을 때 호출되며, reject는 실패 시 호출
const promise = new Promise<number>((resolve, reject) => { // <>를 통해 반환 타입 정의
    setTimeout(() => {
        resolve(20); /// 성공 시 숫자 20을 전달
        reject("실패 이유"); // 실패 시 에러 메시지를 전달
    }, 3000);
});

promise.then((response) => { // .then()은 성공 결과를 처리
    console.log(response * 10);
})

promise.catch((err) => {
    if (typeof err === "string") {
        console.log(err);
    }
})

// ✅ Promise를 반환하는 함수 정의
interface Post {
    id: number;
    title: string;
    content: string;
};

function fetchPost(): Promise<Post> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve({
                id: 1,
                title: "게시글 제목",
                content: "게시글 컨텐츠",
            })
        }, 3000);
    });
}

const postRequest = fetchPost();

postRequest.then((post) => {
    console.log("게시글 ID:", post.id);
    console.log("게시글 제목:", post.title);
    console.log("게시글 내용:", post.content);
});

 

⬇️ 다음 내용은 아래 글을 참고

인프런 강의 - 한 입 크기로 잘라먹는 타입스크립트 (타입 조작하기)