제네릭

타입스크립트를 처음 경험을 하는 유저들이 가장 두려워 하는부분이 제네릭 인것 같습니다. 단어도 유추가 안되고 개념이 낯설기 때문에 어려워 하지 않을까 합니다. 

 

제네릭은 간단하게 문법을 테스트할수있는 코드를 작성을 해보겠습니다. 

//할수를 호출을 할때 타입을 같이 선언해준다 

function logText<T>(text: T):T {
    console.log(text);
    return text;
}

logText<number>(10);
logText<string>('하이');
logText<boolean>(true)

logText에 제너릭을 T (아직 정해지지 않은 타입) 으로 선언한뒤 파라미터 text를 받고 text로 반환하는 함수를 작성하였습니다. 이때 logText가 호출이 될때 타입까지 같이 선언을 하여 넘겨주기 떼문에 타입스트립트에서 추론을 하여 반환 타입이 선언이 되었습니다. 

 

아직까지는 제너릭에 대해서 감이 오지 않은텐데 다른 코드도 한번 작성해 보겠습니다. 

function logText(text: string) {
    console.log(text);
    return text;
}
function logNumber(num: number) {
    console.log(num)
    return num;
}

logText('하이');
logNumber(10);

 

logText 함수는 문자열 text를 받아서 text를 반환하는 함수이고 logNumber는 숫자 타입 num를 받아서 num을 반환하는 코드를 작성하였습니다. 위 두가지 함수를 확인을 하였을때  단순히 타입을 다르게 받기위해서 동일로직에 함수를 하나 더 생성을 한다는것은 코드 관점에서는 좋지 않다고 판단이 됩니다. 

 

그럼 유니온 타입으로 logText 파라미터 타입을 string 도 받고 number를 받으면 되지 라는 생각을 하게 됩니다. 하지만 타입을 유니온으로 받을경우에는 코드 자동완성이 number와 string 의 교집합인 API 만 제공을 하고 

아래와 같이 logText('a')를 a 라는 변수에 담아도 타입스크립트에서는 string 타입으로 추론하는것이 아닌 string | number 유니온 타입으로 추론을 하게 됩니다. 

여기서 제너릭을 사용을 하면 함수를 호출할때 타입이 선언 되기 때문에 반환을 타입과 같이 반환이 되기 때문에 함수에 대한 타입 추론을 정확하게 할수가 있습니다. 

 

처음 작성 했던 logText 의 함수를 string 타입으로 선언하뒤 str_gerneric 변수에 담았을때 타입이 확실하게 추론이 되어 string에서 제공하는 API 를 자동완성으로 제공합니다.