제네릭(Generic) -함수

@2023/09/20

안녕하세요 lika-7입니다

이번 시간에는 TypeScript의 제네릭 -함수에 대해 정리하겠습니다

제네릭이란

💡

1. 제네릭이란 타입을 함수의 파라미터 처럼 사용하는 것을 의미합니다 2. 간단하게 말하자면 “타입을 변수화” 한것이라고 할수 있습니다.

💡

키워드 < >

왜 쓰는지

💡

변수의 타입을 직접적으로 고정된 값으로 명시하지 말고 ‘변수’를 통해 언제든지 변할 수 있는 타입을 통해 유연하게 코딩 할수 있도록 해줍니다.

사용법

함수의 오버로딩에서

//TypeScript

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]),
)

위의 코드는

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

함수의 여러가지 타입에 대입에 대응하기 위해서

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]
}

허용할 타입의 갯수를 늘려주기 위하여 함수를 오버로딩 합니다

💡

1. 그러나 허용될 타입 갯수가 많아질수록 코드가 길어져 가독성이 안좋게 됩니다 2. 이러한 한계 때문에 제네릭이 사용됩니다

제네릭 형식으로 변환

//TypeScript

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

function toArray<T>(a:T,b:T){
    return [a,b]
}
console.log(
    toArray('neo','Anderson'),
    toArray<number>(1,2),
    toArray(true, false),
    toArray({x:1},{x:2}),
    toArray<Arr>([1,2],[3,4]),
)

위의 코드는 함수의 오버로딩을 통해 여러가지 타입의 입력에 대응해야 하는 함수를 제네릭 형식을 이용해 선언하여 코드의 가독성을 높였습니다.

✅

1. <T> 부분이 제네릭 타입 변수 입니다. 2. 일반적으로 ‘T’는 타입을 나타내는 단어의 첫 글자로 사용되지만 다른 식별자도 가능합니다. 3. 보통의 경우 Generic 선언은 “pascal case”로 작성하고 “한글자”로 작성하는 것이 관례입니다.

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

<T>로 제네릭을 이용한다고 명시합니다

a,b 매개변수 또한 제네릭 타입인 T를 명시하여 매개변수로 제네릭 타입을 사용한다고 명시합니다

console.log(
    toArray('neo','Anderson'),
    toArray<number>(1,2),
    toArray(true, false),
    toArray({x:1},{x:2}),
    toArray<Arr>([1,2],[3,4]),
)

이에 위의 코드에 대한 여러 타입에 대응이 가능해졌습니다.

그외 작성법 및 추가 설명

console.log(
    toArray('neo','Anderson'),
)

toArray 함수에 들어가는 매개변수의 첫 인자가 스트링 타입이니 타입 스크립트의 타입 추론 방식을 통해 두번째 인자도 스트링 타입으로 인식됩니다.

console.log(
    toArray('neo',11),
)

첫 인자가 스트링 타입이니 타입 스크립트의 타입 추론 방식을 통해 두번째 인자도 스트링 타입으로 인식합니다, 위의 예시에서는 두번째 인자에 스트링이 들어와야 하는데 넘버가 들어와서 코드상 오류가 납니다

console.log(
    toArray<number>(1,2),
)

함수 호출 부분에 제네릭으로 직접 인자 타입을 명시해줄수도 있습니다, 이렇게 선언 하는 것 보다 타입 스크립트가 타입 추론 하게 작성하는 편이 더 좋은 코드 입니다

console.log(
    toArray([1,2],[3,4,5]),
)

위의 코드를 작성하면 코드상 문제가 없습니다.

하지만

type Arr = [number, number]

위의 코드상에서 의도 한것은 number, number 인자가 들어간 튜플 타입 입니다.

하지만 타입스크립트가 타입추론을 통해서 나온 타입은 number[ ]의 형식으로 number 배열을 사용하였기에 원하는 내용이 적용되지 않았습니다.

toArray<Arr>([1,2],[3,4,5]),

이럴 때에는 제네릭을 통해 <Arr>로 타입을 선언한다면 튜플타입이 되면서 [3,4,5] 부분은 에러가 나오게 만들 수 있습니다.

✅

함수를 호출하는 보통의 경우는 첫번째 인자를 통해 타입 추론을 하게 작성하지만, 타입추론이 100%정확한건 아니기에 타입을 <>를 이용해 제네릭 형식을 명시할수도 있습니다