제네릭 타입 응용

앞서 정리한 제네릭 타입의 몇 가지 응용법을 살펴보자.

다수의 타입 정의하기

다음 코드를 보자.

다수의 제네릭 타입 1

 

입력받은 두 매개변수를 서로 스왑해주는 함수이다. 이때 두 매개변수의 타입이 다르면 어떻게 될까?

다수의 제네릭 타입 2

 

위 코드처럼 에러가 발생한다. 제네릭 타입 T의 경우 두 매개변수가 동일해야 하기 때문이다. 따라서, 이 경우에는 다음과 같이 다수의 제네릭 타입을 사용해 해결할 수 있다.

다수의 제네릭 타입 3

배열의 인덱스 값을 반환하는 경우

또 아래 사진을 보자.

배열 반환 1

 

이번 함수는 입력받은 매개변수의 0번 인덱스 값을 반환하는 함수이다. 이를 역시 제네릭 타입으로 작성해주면 다음과 같은 에러가 발생한다.

배열 반환 2

 

입력받을 매개변수가 배열이라고 명확히 설정되어 있지 않기 때문에 data의 0번 인덱스로 접근하는 것이 불가능하다. 해결방법은 상당히 간단하다.

배열 반환 3

 

매개변수의 타입에 배열이라는 것만 명시해주면 된다. 어차피 인덱스 접근이기에 매개변수도 배열 외에는 들어올 수가 없다. 여기에 이어서 좀 더 괴랄한 문법을 하나 보여주겠다. 일단 다음 코드를 보자.

배열 반환 4

 

위 코드의 경우 문제는 없지만 str의 타입이 유니온 타입으로 추론되어 있다. 만약 우리가 returnFirstValue의 반환값을 number 타입으로만 한정하고 싶을 경우 다음과 같이 작성할 수 있다.

배열 반환 5

특정 프로퍼티가 존재할 경우

역시 다음 코드를 보자.

길이 반환 1

 

들어오는 매개변수의 길이를 반환하는 함수이다. 또한, 매개변수가 객체이고 length라는 프로퍼티가 존재할 경우 해당 값을 출력한다. 이를 평범하게 제네릭 타입 T로 표현할 경우 역시 에러가 발생한다. 이렇게 특정 프로퍼티가 존재하는 경우 제네릭 타입을 다음과 같이 작성해야 한다.

길이 반환 2

 

타입 상속을 이용해 length라는 프로퍼티가 있음을 명시하면 함수의 선언에서의 에러도 해결하면서 매개변수는 길이가 존재할 경우 반환값의 문제가 없다.

 

제네릭 타입은 사용자가 잘 응용할수록 굉장히 강력하게 도움이 되는 타입 선언 방법이다. 객체 또는 함수의 타입을 선언할 때 많은 고민과 응용을 해서 사용하기 바란다.

참고자료

한 입 크기로 잘라먹는 타입스크립트(TypeScript)

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