Typescript Generics 간단한 설명

Typescript에서 Generics 란?

 

안녕하세요, 매일 새로운 것을 배우고 성장하고 싶은 정글탐험입니다. 오늘은 typescript나 java 같은 언어에서 자주 보이는 Generics에 대해서 이야기해보려고 합니다. 예전에 자바 공부할 때는 소스를 보고 파악하려면 제너릭을 제대로 이해를 못하면 보기가 어려울 정도여서 자주 봤었는데, 자바스크립트를 주로 사용하다 보니 타입 스크립트를 공부할 때 제너릭이 다시 살짝 막히는 것 같아서 정리를 간단하게 남아 해 놓으려고 합니다.

 

Generics 란?

Type을 함수의 인자 값처럼 사용하여 함수를 사용할 때 사용되는 타입을 정하는 것

 

Gernerics 사용 예

 

Generics를 사용해야 하는 예를 살펴보면, 예를 들어서 숫자를 하나 받아서 그 숫자가 들어있는 배열을 반환하는 함수를 만든다고 가정했을 때 이렇게 만들면 됩니다.

 

function arrayReturner(arg: number) {
  let array = [];
  array.push(arg);
  return array;
}

 

이렇게 했을 때 이 함수는 숫자만 받아서 숫자가 들어있는 배열을 리턴하는 역할만 할 수 있습니다. 여기서 만약에 우리가 string을 주고 string이 들어있는 배열을 되돌려 받고 싶은 경우에는 arg:string으로 인자 값의 타입을 바꾼 새로운 함수를 만들어야 할까요? 그러다가 나중에 boolean을 받는 함수를 만들어야 한다면...? 그럼 그냥 arg:any로 하면 아무거나 받을 수 있으니깐 해결!이라고 생각할 수도 있으나 이렇게 되면 이 함수가 무엇을 리턴하는지 알 수가 없어서 이 함수를 사용할 때 리턴 값에 대한 타입 체크를 꼭 해야 할 수도 있습니다. 이때 Generics를 쓰면 함수를 사용할 때 내가 어떤 타입의 인자 값을 넘길 건지 정할 수가 있어서 리턴 값도 뭔지 알 수 있게 됩니다. 아래는 함수를 Generics를 이용해서 만들고 사용하면 사용할 때 어떤 타입을 리턴하는지 바로 보여주는 예입니다.

 

Generics를 적용한 예

혹시 코드를 붙여 넣고 확인하고 싶으실 때를 대비해서 코드도 적어 놓겠습니다.

function arrayReturner_with_generics<T>(arg: T): T[] {
  let array = [];
  array.push(arg);
  return array;
}

arrayReturner_with_generics<string>('정글탐험');

 

Generics에 대한 포스팅을 마무리하며

 

처음에는 이해하기 어렵고 왜 이런 걸 쓰나 싶었지만, api나 라이브러리 같은 것을 만들 때는 없으면 너무 불편할 것 같다는 생각이 들었습니다. 그리고 요번엔 아주 간단히만 정리했지만, 다음에는 좀 더 실제의 코드에서 적용된 예를 이용해서 심도 있게 정리 해 놓을 예정입니다. 그럼 오늘도 다들 즐거운 하루 되셨길 바라며 이만 줄이겠습니다.

---

공감 눌러주시면 안 그래도 행복한 하루가 더 행복한 하루가 됩니다!

구독하기 눌러주시면 제 글이 발행되면 더 빨리 보실 보실 수 있어요~!

그럼 오늘도 감사합니다!

By 정글탐험

---