Generics

Generics는 타입스크립트에서 함수, 클래스, 인터페이스, type alias를 사용할때 여러 종류의 타입에 대하여 호환을 맞춰야할때 사용한다.

function merge(a: any, b:any) {
    return {
        ...a,
        ...b
    };
}

위와같이 파라미터 값들의 타입이 정확히 정해져있지않을때 generics를 쓴다.

객체가 비어있다

Generics문법을 사용하니 merged의 객체가 채워졌다.

 

aaa를 넣었을땐 wrapped안의 param값이 string인것을 알 수있고,

숫자를 넣으니 param값은 number로 바껴있다.

이처럼 Generics를 사용하면 param의 타입을 any로 지정해주었을때처럼 wrap안에 어떤 값이든 넣어줄 수 있지만,

any를 사용할땐 숫자를 넣어주었음에도 param의 타입은 여전히 any로뜬다.

Generics를 사용했을땐 넣어주는 값의 타입에따라 param의 타입을 정해준다.

 

interface와 type alias에서도 generics를 사용 가능하다.

// interface

interface Items<T> { // interface안에 리스트를 넣어주고 이 리스트는 T의 배열이다라고 설정
    list: T[]
};

const items: Items<string> = { // Items의 타입은 generic을 사용하여 string으로 지정
    list: ['a', 'b', 'c'] // 그러면 list는 스트링 배열이어야한다. 숫자를 넣으면 에러가 뜬다.
}

// type allias를 사용할땐 그냥 type과 '='만 넣어주면 된다.
type Items<T> = { 
    list: T[]
};

const items: Items<string> = { 
    list: ['a', 'b', 'c'] 
}

// 여러개도 넣어줄 수 있다.

type Items<T, V> = { 
    list: T[]
    value: V
};

const items: Items<string, number> = { 
    list: ['a', 'b', 'c'], 
    value: 95,
}

 

class에서 generic사용하기

Queue => FIFO자료형

class Queue<T> { // Generic으로 T 타입 설정
    list: T[] = [];  // list의 타입은 T로 이루어진 배열이다, 기본값은 빈배열

    get length() { // get 메서드
        return this.list.length;
    }

    enqueue(item: T) { // enqueue는 queue에 새로운걸 등록할때 사용
        this.list.push(item);
    }

    dequeue() { // queue에서 가장 첫번째 항목을 뺄때 사용
        return this.list.shift();
    }
}

const queue = new Queue<number>(); // 새로운 Queue는 숫자로 이루어져있다.
queue.enqueue(0);
queue.enqueue(1);
queue.enqueue(2);
queue.enqueue(3);
queue.enqueue(4);

while (queue.length > 0) {
    console.log(queue.dequeue()); // queue의 길이가 0보다 크다면 queue에서 dequeue를 호출
}

// 컴파일
yarn run tsc

// 콘솔에 결과 출력
node ./dist/practice.js

 

강의: <<벨로퍼트와 함께하는 모던 리액트>> by 강사 김민준 님