TypeScript | Generic 제네릭 (feat. TypeScript 두 달차 후기)

0. 타입스크립트 두 달 후기

타입스크립트를 사용한 지 두 달이 되어간다.
그동안 초보적인 수준에서 타입스크립트를 배우고 적용하고 적응해가는 과정이 예상했던 것보다 어렵지 않았다.
내가 느꼈던 타입스크립트의 장점은,

1) VSCode + TypeScript = 환상의 호흡: TypeScript를 지원하는 IDE를 사용하면 자동완성 기능이라든지, 툴팁으로 어떤 arguments들이 들어가야하는지를 알려주는 기능을 통해 코드를 작성하는 시간을 단축할 수 있었다. (특히 VSCode를 사용하면서 TypeScript에게 폴인럽..💛)

2) 디버깅을 하기 전에 미리 에러 방지: 타입스크립트를 자바스크립트로 컴파일하는 과정에서 미리 타입 에러를 체크해서 에러가 있다면 아예 컴파일 조차 되지 않는다. 이런 이유로 런타임 전에 오류를 사전 체크할 수 있는 장점이 있었다. 또한 디버깅하면서도 오류를 바로잡을 때, 타입만 제대로 정의해주었다면 어떤 인자로 오류가 난 것인지 파악하기 수월했다.

3) 수많은 documentation들: 막상 컴파일 에러가 발생하더라도, 타입스크립트 관련한 수많은 문서들과 스택오버플로우와 함께라면 크게 두렵지 않았다. 수많은 오류를 해결하면서 새로운 스택을 배우는 것에 대한 막연한 두려움을 쉽게 떨쳐버릴 수 있게 해준 과정이었다.

하지만 사용하면 할수록 타입스크립트의 올바른 사용(?)에 대한 의문과 갈증 같은 것이 생겼는데...
예를 들어 jsx에서의 event 타입 정의라든지, thrid party library의 타입 정의라든지(그동안 any를 남발하곤 했다).. 혹은 재사용하는 컴포넌트의 경우, 미리 타입을 정의해버리면 재활용하는 데에 있어서 난항을 겪곤 했다.
그러면서 any를 써야하는 경우가 종종 생겼는데, 사실 any를 쓰면 기존 자바스크립트와 다를 것이 없기 때문에 내가 제대로 타입스크립트를 활용하고 있는 것인지 의문이 들었다🧐..

앞으로 타입스크립트에 대해 공부하며..
올바른 사용을 지향하고 꾸준한 리팩토링을 하겠다고 약속하며..😇
오늘은 제네릭에 대해 정리해보려고 한다.

1. 제네릭이란? 왜 제네릭을 써야하나?

Generic이란 데이터의 타입을 일반화한다(generalize)한다는 것을 뜻한다.
Generic은 자료형을 정하지 않고 여러 타입을 사용할 수 있게 해준다.
즉, 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법이다. 한번의 선언으로 다양한 타입에 '재사용'이 가능하다는 장점이 있다.

제네릭을 쓰지 않을 경우, 불필요한 타입 변환을 하기 때문에 프로그램의 성능에 악영향을 미치기도 하는데, 제네릭을 사용하게되면 따로 타입 변환을 할 필요가 없어서 프로그램의 성능이 향상되는 장점이 있다. (링크)

2. generic이 없다면?

위처럼 generic을 쓰지 않는다면, 1) 타입을 미리 지정하거나 2) any를 이용하여 구현할 수 있다.
1) 타입을 미리 지정하자면, 확실한 타입체크가 이뤄질 수 있겠지만 항상 number라는 타입을 받아야하므로 범용성이 떨어진다.
2) 그렇다고 any를 사용한다면 자료의 타입을 제한할 수 없을 뿐더러, 이 function을 통해 어떤 타입의 데이터가 리턴되는지 알 수 없다.

이런 경우에 사용할 수 있는 것이 제네릭이다.

3. generic 이렇게 써보자!

1) Generic 기본적 사용

<T>(arg: T):T 여기서 <T>는 Type의 약자로 제네릭을 선언할 때 T를 관용적으로 사용한다. 여기에서 다이아몬드 연산자 안에 있는 T는 타입변수라고 한다.
이제 이 identify 함수는 T라는 타입 변수를 갖게 된다. 그리고 argument와 return의 type은 T라는 타입 변수로 동일하다.

만약 여기서 length를 확인하는 코드를 쓰면 어떻게 될까? 에러가 난다. 왜냐하면 입력값과 리턴값의 타입을 동일하게 정해두기만 했으므로, 인자에 length 프로퍼티가 없는 number 타입이 들어왔을 때 유효하지 않기 때문이다. 따라서 다음과 같이 세부적으로 변수 타입을 지정해줄 수 있다. 이제 이 함수는 T라는 변수 타입을 받고, 인자로는 배열 형태의 T를 받는다. 즉, identify([1, 2, 3])과 같은 형태로 사용할 수 있다.
ps. 혹은 <T extends Lengthwise>처럼 Lengthwise를 extends해서 사용하면 부분적으로 length property가 있는 타입의 경우 에러 없이 사용할 수 있다.

2) 두 개 이상의 Generic 사용하기

두 변수의 타입이 다를 경우 두 가지의 타입 변수가 필요하다. 이 때 제네릭을 사용할 수 있다. 관용적으로 사용하는 T 다음으로 오는 알파벳을 순서대로 사용하면 된다.

3) 상속 이용하기 (extends)

타입스크립트 작성 중 메서드 관련 오류가 날 때가 잦은데, 이런 방법을 사용할 수도 있었다. (출처) 위는 toString 메서드를 가지고 있는 객체를 extends해서 에러를 해결하는 예시이다. 필요한 메서드를 추가하는 것뿐만 아니라 하나의 메소드만 사용가능하도록 제한할 수도 있다.

4) 조건부 타입으로 Generic 사용하기

위처럼 특정 인터페이스 내에서 extends와 삼항 연산자를 이용해서 타입을 지정할 수도 있다.

5) JSX에서 arrow function으로 제네릭 사용하기

const foo = <T extends {}>(x: T):T => x를 사용하면 된다. 다이아몬드 연산자가 HTML태그가 아니라 제네릭이라는 힌트를 주기 위해 extends {}를 사용한다.
다만 이 경우, T가 object에 제한되기 때문에 type-safety를 위해 extends unknown을 사용할 수 있다.
const foo = <T extends unknown>(x: T) => x

참고자료

https://www.typescriptlang.org/docs/handbook/generics.html
https://www.xspdf.com/help/52564514.html
https://post.naver.com/viewer/postView.nhn?volumeNo=29721395&memberNo=10381152
https://muang-kim.tistory.com/86
https://darrengwon.tistory.com/802
https://hyunseob.github.io/2017/01/14/typescript-generic/