[TypeScript] 제네릭(Generic) - 다시보기

 

◽ 제네릭 사용하기

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

 

 

◽ 제네릭의 장점

유니온을 사용하는 경우 명확한 변수타입이 지정되지않아 생기는 문제들이 있었다.

제네릭은 호출시점에 타입을 지정하므로 이런 문제점을 해결할 수 있다.

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

logText<string>('안녕')
logText<number>(123)
logText<boolean>(true)

 

 

◽ 제네릭 적용하기

[before]
// 이렇게 선언하는 경우 type에 따라 여러개의 인터페이스를 만들어주어야 한다.
// 유지보수면에서 효율성이 떨어진다.
interface DropdownStr {
  value: string;
  selected: boolean;
}
interface DropdownNum {
  value: number;
  selected: boolean;
}
const obj: DropdownStr = { value: 'abc', selected: false }
const obj: DropdownNum = { value: 1, selected: false }


[after]
// 제네릭을 사용하여 타입별로 아래와 같이 선언할 수 있다.
interface Dropdown<T> {
  value: T;
  selected: boolean;
}
const obj: Dropdown<number> = { value: 1, selected: false }
const obj: Dropdown<string> = { value: 'abc', selected: false }

 

 

◽ 제네릭 적용하기2

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

const emails: DropdownItem<string>[] = [
  { value: 'naver.com', selected: true },
  { value: 'gmail.com', selected: false },
  { value: 'hanmail.net', selected: false },
];

const numberOfProducts: DropdownItem<number>[] = [
  { value: 1, selected: true },
  { value: 2, selected: false },
  { value: 3, selected: false },
];


// 방법 1. 파라미터에 제네릭을 사용하기
function createDropdownItem(item: DropdownItem<number> | DropdownItem<string>) {
  // ...
}
emails.forEach(function (email) {
  const item = createDropdownItem(email);
});


// 방법 2. 함수 자체에 제네릭을 사용하기
function createDropdownItem<T> (item: DropdownItem<T>) {
  // ...
}
emails.forEach(function (email) {
  const item = createDropdownItem<string>(email);
});

 

 

◽ 제네릭 제한 (다시보기)

// 제네릭 타입 제한 2 - 정의된 타입 이용하기
interface LengthType {
  length: number;
}

function logTextLength<T extends LengthType>(text: T): T {
  text.length;
  return text;
}

logTextLength(10); // error

// 제네릭 타입 제한 3 - keyof
interface ShppingItem {
  name: string;
  price: number;
  stock: number;
}
function getShoppingItemOption<T extends keyof ShppingItem>(itemOption: T): T {
  return itemOption;
}
getShoppingItemOption(10) // error
getShoppingItemOption<string>('a') // error
getShoppingItemOption("price") // key만 들어갈 수 있다.

 

 

---

 

 

출처

타입스크립트 입문 - 기초부터 실전까지 - 인프런 | 강의