제네릭(Generics)의 사전적 정의
•
C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징이다.
•
한가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용된다.
예시
•
제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미한다.
function getText(text) {
return text;
}
// hi, 10, true 등 어떤 값이 들어가더라도 그대로 반환한다.
getText('hi'); // 'hi'
getText(10); // 10
getText(true); // true
TypeScript
복사
•
함수를 호출할 때 아래와 같이 함수 안에서 사용할 타입을 넘겨줄 수 있다.
function getText<T>(text: T): T {
return text;
}
getText<string>('hi'); // 'hi'
getText<number>(10); // 10
getText<boolean>(true); // true
TypeScript
복사
제네릭 기본 문법이 적용된 형태
기존 타입 정의 방식과 제네릭의 차이점 - 함수 중복 선언의 단점
function logText(text: string) {
console.log(text);
return text;
}
function logNumber(num: number) {
console.log(num);
return num;
}
TypeScript
복사
•
단순히 타입을 다르게 받기 위해 중복되는 코드들을 계속해서 생성하게 되면 유지보수 관점에서 좋지 않다.
기존 문법과 제네릭의 차이점 - 유니온 타입을 이용한 선언 방식의 문제
•
input에 대한 문제는 없지만 반환값에 대해서는 문제가 있다.
function logText(text: string | number) {
console.log(text);
// string과 number가 공통으로 접근할 수 있는 속성이나 API에 대해서만 자동완성으로 보여진다.
return text;
}
const a = logText('a');
a.split(''); // error 문자열 'a'를 파라미터로 넘겨주었지만 리턴타입은 여전히 string|number
logText(10);
TypeScript
복사
제네릭 장점과 타입 추론에서의 이점
// 함수를 정의할 때 타입을 정의하는 것이 아니라
// 함수를 호출하는 시점에 정의한다.
function logText<T>(text: T): T {
console.log(text);
return text;
}
const str = logText<string>('abc');
str.split('');
const login = logText<boolean>(true);
TypeScript
복사
제네릭의 타입 제한
function logTextLength<T>(text: T[]): T[] {
console.log(text.length);
text.forEach(function(text) {
console.log(text);
});
return text;
}
logTextLength<string>(['hi', 'abc']);
TypeScript
복사
정의된 타입으로 타입 제한하기
interface LengthType {
length: number;
}
function logTextLength<T extends LengthType>(text: T): T {
text.length;
return text;
}
logTextLength(10); // error
logTextLength({ leng: 10 }); // error
TypeScript
복사
keyof로 제네릭의 타입 제한하기
interface ShoppingItem {
name: string;
price: number;
stock: number;
}
function getShoppingItemOption<T extends keyof ShoppingItem>(itemOption: T): T {
return itemOption;
}
// getShoppingItemOption(10);
// getShoppingItemOption<string>('a');
getShoppingItemOption('name');
TypeScript
복사
