TypeScript의 Generics! 도대체 언제 쓰는거니?

요즘 한창 TypeScript 공부에 열을 올리고 있다. 공부하던 도중 Generics을 만났고, 도대체 언제 써야되는지 의문이였다. 항상 Javascript의 동적타입에 익숙한 사람인 내가 정적 타입에서 사용하는 Generics을 만난 기분은 갓 개발 처음 시작하여 Javascript의 문법을 배웠을때의 그 느낌과 같았다. 그래서 나와 같은 사람이 있다면 이 글을 읽고 조금이라도 도움이 되었으면 한다. 

 

1. TypeScript가 뭔데?

일단 자바스크립트의 유연함에 대한 문제를 해결하기 위한 언어이다. 자바스크립트는 동적타입, 타입스크립트는 정적타입의 언어이다. 이렇게 말하면 아예 둘이 완전 다른 언어라고 오해하기 쉬운데, 타입스크립트는 자바스크립트의 상위집합이다. 그래서 타입스크립트 내에서 자바스크립트를 쓸 수 있고, 최신 ECMAScript가 잘 적용되어있는 컴파일형 언어이다. 이렇게 말하면 또 어렵게 느껴질 수 있는데 그냥 깔끔하게 자바스크립트의 상위호환 언어라고 보자.

 

2. Generics란?

• 클래스 내부에서 사용할 데이터 타입을 외부에서 지정하는 기법을 의미한다 (출처 : 생활코딩)
  
• 타입스크립트에서 함수, 클래스, interface, type alias 를 사용하게 될 때 여러 종류의 타입에 대하여 호환을 맞춰야 하는 상황에서 사용하는 문법입니다. (출처 : 벨로퍼트)

 

3. 그래서 Generics를 언제 쓰는건데?

범용적인 타입을 수용해야 할 때 사용한다. 따라서 TypeScript에서는 any를 이용하여 구현하는 것이 가장 쉬운 방법이다. 하지만 any를 쓰면 타입유추를 다 깨뜨리는 행위이다. 이것은 typescirpt를 전혀 typescript처럼 사용하지 않는 것이 되는 것이다. 그렇다고 매번 타입을 만들거나 extends를 이용하여 만들기에는 너무 번거롭다. 따라서 Generics를 적재적소에 잘 사용하면 코드를 양산하지 않아도 된다.   

 

4. 그럼 어떻게 쓰는건데?

꺽쇠(<>) 안에 타입을 추상화할 임의의 값을 넣어두면 된다!

아래는 벨로퍼트님의 글에서 발췌한 코드이다. Queue라는 자료형구조에서 따와서 클래스를 만들었으며, 등록(enqueue)한 항목을 뽑아오는(dequeue) 기능을 한다! 

class Queue<T> {
    list: T[] = [];

    enqueue(item: T) {
        this.list.push(item);
    }

    dequeue() {
        return this.list.shift();
    }
}

const queue = new Queue<number>();
queue.enqueue(0);
queue.enqueue(1);
queue.enqueue(2);
queue.enqueue(3);
queue.enqueue(4);
console.log(queue.dequeue());
console.log(queue.dequeue());
console.log(queue.dequeue());
console.log(queue.dequeue());
console.log(queue.dequeue());

 

이렇게 되면, 필요한 값을 만들때 꺽쇠안에 타입을 넣어주면 그 값을 받아서 타입이 지정되게 된다.