[Typescript] Section 09. 제네릭

1. 제네릭 소개

제네릭은 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 개념입니다. 특히, 한 가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는 데 사용됩니다. 그렇다고 타입스크립트의 제네릭이 C#, Java에서 사용되는 제네릭과 메커니즘이 같다는 의미는 아닙니다.

2. 제네릭의 기본 문법

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

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

3. 기존 타입 정의 방식과 제네릭의 차이점

제네릭을 사용하지 않고 기존 타입 정의 방식대로 하면 비슷한 기능의 함수를 구현하기위해 또 다른 함수를 만들어야 돼서 중복 코드가 생성됩니다.

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

function logNumber(num: number) {
  return num;
}

logText('a');
logNumber(10);

4. 기존 문법과 제네릭의 차이점

유니온 타입을 사용하여 파라미터 타입으로 string과 number를 설정하여 인풋에 관한 타입은 해결 할해결할 수 있지만 반환값에 대한 타입은 해결할 수 없습니다.

function logText(text: string|number) {
  return text;
}

logText('a');
logText(10);

const a = logText('a');
a.split('') //error: Property 'split' does not exist on type 'string | number'.
							//Property 'split' does not exist on type 'number'

5. 제네릭의 장점과 타입 추론에서의 이점

제네릭을 사용하면 파라미터와 반환값에 대한 타입 추론도 가능합니다. 타입 추론을 활용하면 비슷한 기능의 함수를 만들기 위해 중복 코드를 생성 하지 않아도 됩니다

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

const str = logText<string>('a');
str.split(''); // success

const login = logText<boolean>(true);

6. 제네릭 실전 예제 살펴보기

learn-typescript → dropdown-generic.ts 참고

인터페이스에서 제네릭을 설정하는 방법

interface Dropdown<T> {
	value: T;
	selected: boolean;
}

const obj: Dropdown<number> = { value: 'abc', selected: false}; //error
const obj: Dropdown<number> = { value: 10', selected: false}; //success

7. 제네릭의 타입 제한

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

logText<string>(["hi", "abc"]);

8. 정의된 타입으로 타입을 제한하기

function logText<T>(text: T): T {
  console.log(text.length); // Error: T doesn't have .length
  return text;
}

인자의 타입에 선언한 T는 아직 어떤 타입인지 구체적으로 정의하지 않았기 때문에 length코드에서 오류가 납니다. 이럴 때 만약 해당 타입을 정의하지 않고도 length속성 정도는 허용하려면 아래와 같이 작성합니다.

interface LengthWise {
  length: number;
}

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

logText(10); // Error, 숫자 타입에는 `length`가 존재하지 않으므로 오류 발생
logText({ length: 0, value: 'hi' }); // `text.length` 코드는 객체의 속성 접근과 같이 동작하므로 오류 없음

위와 같이 작성하게 되면 타입에 대한 강제는 아니지만 length에 대해 동작하는 인자만 넘겨받을 수 있게 됩니다.

9. keyof로 제네릭 타입 제한하기

interface ShoppingItem {
	name: string;
	price: number;
	stock: number;
}

function getShoppingItemOption<T extends keyof ShoppingItem>(itemOption:T): T {
	return itemOption;
}

getShoppingItemOption('name')