[TypeScript] 제네릭(Generics) 정리

제네릭이란?

•  제네릭은 C#,Java 등의 언에서 재사용성이 높은 컴포넌트를 만들때 자주 활용된다.
•  한가지 타입보다 여러 가집 타입에서 동작하는 컴포넌트를 생성하는데 사용됨.
•  제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미한다.

function getText(text) {
	return text;
}

JS로 이러한 코드가 있을 때 인자로 'hi', 10, true를 각각 넣어준다면 함수는 그 값을 그대로 리턴해준다.

이를 TS의 제네릭 문법을 적용해본다면 아래처럼 정의한 후 재활용이 가능해진다.

// const getText = <T>(text:T):T =>{}
// const getText = <T = any>(text:T):T =>{}  
// 위처럼 제네릭에 기본 타입도 줄 수 있다.

function getText<T>(text:T):T{
	return text;
}

getText<string>('hi');
getText<number>(10);
getText<boolean>(true);

물론 위에 코드를 any를 사용해서 작성할 수 있다. 

function logText(text:any):any{
	return text;
}

하지만 이럴 경우 any는 타입 검사가 아니므로 인자가 어떤 타입인지, 어떤 타입이 리턴되는지 알 수 없다. (제네릭을 사용하는 이유)  제네릭을 이용한 뒤 호출하는 방식은 아래와 같다. (기본적으로 string 이라 생략하는듯?)

참고: https://lts0606.tistory.com/24

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

const text_1 = logText<string>("Hello Generic");

const text_2 = logText("Hello Generic");

인터페이스에 제네릭을 사용하는 방법은 아래와 같음

interface IValueCheck<T>{
	value: T
}

let myValue : IValueCheck<string>{
	value: 'data'
}

제네릭 타입 변수

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

위와 같이 함수를 작성할 경우 해당 text에 .length가 있다는 단서는 어디에도 없어서 에러가 발생한다.

text에는 number가 들어갈 수도 있고 string이 들어 갈 수 있기 때문에 number가 들어갈 경우 .length가 유효하지 않기 때문

이것을 해결하는 방법으로는 아래 코드가 있다. ( 제네릭 타입이 배열이기 때문에 'length'가 허용됨)

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

/**
명시적 선언
function logText<T>(text:Array<T>):Array<T> {
	console.log(text.length);
    return text;
}
*/