[패캠] 패스트캠퍼스 문법 - 제네릭 함수 (generic) (15/20)

Fastcampus 프론트엔드 개발 강의

💡 본 타입스크립트 문법 시리즈는,
     패캠의 '프론트엔드 웹 개발의 모든 것 초격차 패키지 Online'에 있는 TS 강의 노트이다.

 

현재 수강 중인 패스트캠퍼스(fastcampus, 이하 패캠) 프론트엔드 패키지 강의가 있다.

강사님은 김영웅(Heropy) 님이다.

이 글을 쓰면서 강사님의 블로그에 '한눈에 보는 타입스크립트' 자료가 있다는 것을 알게 됬다... (바보😅)

 

강의를 듣는데, 강의자료가 없어서 일일이 강사님이 말씀을 따라 적으면서 강의 교안(?), 강의 노트를 작성했다.

혹시나 나처럼 패캠에서 타입스립트(TypeScript)를 수강하는 사람들에게 도움이 되면 좋겠다. 🔥

 

15. 제네릭 - 함수

---

제네릭 문법은 크게 함수와 클래스, 인터페이스에서 사용할 수 있다.

 

오버로딩을 제네릭 문법으로 수정

아래 코드 처럼 toArray 라는 함수를 사용하는 방법이 굉장히 여러 개가 있을 수 있다. 그 함수를 사용할 때마다 오버로딩 개념을 계속해서 추가해 나가기는 어렵다.

interface Obj {
    x: number
}
type Arr = [number, number]

function toArray(a: string, b: string): string[]
function toArray(a: number, b:number): number[]
function toArray(a: boolean, b: boolean): boolean[]
function toArray(a: Obj, b: Obj): Obj[]
function toArray(a: Arr, b: Arr): Arr[]
function toArray(a: any, b: any) {
    return [a, b]
}

console.log(
    toArray('Neo', 'Anderson'),
    toArray(1,2),
    toArray(true, false),
    toArray({x:1}, {x:2}),
    toArray([1,2], [3,4])
)

 

제네릭 문법을 사용하면 함수의 이름 뒤에 어떤 타입을 받을지 아직 정확하게 모르지만, 그 타입을 받아서 대문자 T라는 타입 변수 이름을 지정하고, 각각의 매개 변수에 T 타입을 사용할 수 있다. 그리고 함수를 호출할 때도 함수 이름 뒤에 꺽쇠 괄호를 열고 닫아서 내가 지정한 T라는 부분이 어떤 타입이 되었으면 하는지 명시적으로 내용을 제공할 수 있다. 혹은 동작이 되는 순서를 기반으로 타입스크립트가 타입 추론을 할 수 있도록 첫 번째 a에 문자 데이터의 아규먼트를 제공하면 T는 문자열 타입이 되어 b라는 매개변수의 T도 문자열 타입으로 받아야 되는 상황이 만들어 진다.

꺽쇠 괄호 사이의 이름은 원하는 이름을 넣어도 상관 없다.

interface Obj {
    x: number
}
type Arr = [number, number]

function toArray<T>(a: T, b: T) {
    return [a, b]
}

console.log(
    toArray('Neo', 'Anderson'),
    toArray(1,2),
    toArray(true, false),
    toArray({x:1}, {x:2}),
    toArray([1,2], [3,4])
)

이 제네릭 문법은 상황에 따라서 굉장히 유용하게 사용될 수 있다.

타입 추론 시간에 되도록이면 명시적인 방법보다, 타입스크립트가 추론할 수 있는 상황 자체를 만들어주는 것이 더 효율적이기 때문에 타입 추론을 최대한 많이 활용하는 것이 좋다. 그래서 제네릭 문법을 통해서 함수를 호출할 때는 꺽쇠 괄호를 직접 작성하는 것보다는 현재 구조를 최대한 활용하여 타입 추론을 유도하는 것이 좋다.

a와 b에 모두 T 타입을 적용했기 때문에 toArray 함수를 호출할 때 매개변수로 다른 타입을 넣게 되면 Error가 발생한다.

명시적 타입 지정이 필요한 경우

만약 toArray 함수의 마지막 호출의 두 번째 인수 부분의 숫자를 두 개에서 세 개로 바꿔주면 어떻게 될까?

Error는 발생하지 않는다. 이유는 따로 제네릭의 타입을 명시하지 않았기 때문이다. 첫 번째 인수로 들어오는 배열 데이터를 기준으로 해서 타입 추론을 하게 되는데, 위에 타입 별칭으로 만들어 둔 튜플 타입이 아닌 숫자 데이터를 아이템으로 가지는 일반 배열 타입(number[ ])으로 추론 되었다.

// toArray([1,2], [3,4])
toArray([1,2], [3,4,5]) // number[]

처음에 의도 했던 것은 타입 별칭 Arr와 같이 숫자 데이터를 두 개만 가지는 튜플 타입이었다. 하지만 타입 추론을 통해서 인식되는 것이 의도한 튜플 타입이 아니기 때문에 명시적으로 작성을 해주어야 한다.

...
type Arr = [number, number]
...
toArray<Arr>([1,2], [3,4,5]) // Error
)

튜플 타입을 명시적으로 지정해주면, 의도했던 바 대로 함수의 매개변수의 타입이 모두 튜플이 되어 두 번째 인수에 추가로 들어간 숫자 부분에서 Error가 발생한다.

 

제네릭 문법 (함수) 정리

타입스크립트 제네릭 문법을 함수에 어떻게 사용할 수 있는지 배웠다.

사용 방법은 함수를 선언할 때, 함수 이름 뒤쪽에 꺽쇠 괄호를 열고 닫아서, 원하는 대로 자유롭게 타입 변수의 이름을 지정한다. 타입 변수의 이름은 보통 Pascal 케이스를 사용하고 최대한 한 글자(<T>)로 줄여서 사용하는 편이다. 물론 보편적인 방식이 마음에 들지 않다면 <Type> 이라고 전체 이름을 써서 타입 변수 이름을 지정해도 문제 없다.

함수를 호출할 때, 꺽쇠 괄호를 열고 닫아서 그 타입 변수가 어떤 타입이 될 것 인지를 따로 넣어줄 수도 있고, 별도의 타입을 넣어주지 않더라도 들어오는 첫 번째 인수를 통해서 추론이 가능하도록 쓸 수도 있다. 물론 그 타입 추론이 100% 정확한 것은 아닐 수 있기 때문에 따로 꺽쇠 괄호를 열고 닫아서 타입을 명시적으로 제공하는 방식도 중요하게 쓰일 수 있다.

 

 

Reference

---

김영웅 강사님 블로그 中 TS 파트

https://heropy.blog/2020/01/27/typescript/

한눈에 보는 타입스크립트(updated)

 

김영웅 강사님 유튜브 채널

https://www.youtube.com/channel/UCcjhMpoaNvyy0StN9KgtF6w

HEROPY