[TypeScript] 제네릭(Generics) - 사용법 및 간단 예제

매개변수의 타입이 바뀌었는데, 동일한 함수를 재사용하고 싶다면

• 함수 오버로드
• 유니언 타입을 사용한다. [✅, 아래코드]

 

📌 예제1

function getSize(arr:number[] | string[]):number {
  return arr.length;
}

const arr1 = [1, 2, 3];
getSize(arr1); // 3

const arr2 = ["1", "2", "3"]
getSize(arr2); // -> Error

 

Generics

제네릭(Generics)을 이용하면 클래스나 함수, 인터페이스를 다양한 타입으로 재사용할 수 있다.

선언할 때는 타입 파라미터(<T>)만 적어주고, 생성하는 시점에 사용하는 타입을 결정한다.

• <T> : 타입 파라미터, 어떤 타입을 전달 받아 해당 함수에서 사용할 수 있도록 한다.

📌 제네릭 사용하여 함수 재사용하기 (예제1 변형)

// Generics
function getSize<T>(arr:T[]):number {
  return arr.length;
}

const arr1 = [1, 2, 3];
getSize<number>(arr1); // 3

const arr2 = ["1", "2", "3"]
getSize<string>(arr2); // 3

const arr3 = [false, true, true]
getSize<boolean>(arr3); // 3

const arr4 = [{}, {}, {name:"Tim"}]
getSize<object>(arr4); // 3

 

📌 제네릭 사용하여 함수 재사용하기 2

// Generic
interface Mobile<T> {
  name: string;
  price: number;
  option: T;
}

const n1:Mobile<object> = {
// const n1:Mobile<{color: string; coupon: boolean}> = {
  name: "s21",
  price: 1000,
  option: {
    color: "red",
    coupon: false
  }
}

const n2:Mobile<string> = {
  name: "s20",
  price: 900,
  option: "good"
}

하나의 인터페이스만 선언하고, 각기 다른 모습의 객체들을 만들어줄 수 있다.

⏩ 여기서는 하나의 인터페이스로, option만 다르게 설정하였다.

 

 

📌 제네릭 사용하여 함수 재사용하기 3

// Generic
interface User {
  name: string;
  age: number;
}

interface Car {
  name: string;
  color: string;
}

interface Book {
  price: number;
}

const user:User = { name: "Thomas", age: 10 };
const car:Car = { name: "bmw", color: "red" };
const book:Book = { price: 1000 };

function showName<T extends { name:string }>(data:T): string {
  // data로 T가 올건데, 이 T는 { name:string }을 확장한 형태이다.
  return data.name;
} 

showName(user);
showName(car);
// showName(book); -> Error: name 프로퍼티가 없음

---

🚀 참고

• Typescript #7 제네릭, 코딩앙마
• Typescript Handbook 한글 문서

 

➰ 더 공부할 것

• 함수 오버로드 개념 확실히 잡고 가기!