본문 바로가기

Frontend/typescript

Typescript 배우기 7(제네릭)

// Generic

// 함수
// function getSize(arr:number[] | string[] | boolean[] | object[]):number {
//   return arr.length;
// }
function getSize<T>(arr: T[]) {
  // <T> 타입파라미터 어떤 타입이든 전달받아서 사용
  return arr.length;
}

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

const arr2 = ['a', 'b', 'c'];
getSize<string>(arr2); // 3

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

const arr4 = [{}, {}, { name: 'Tim' }];
getSize(arr4); // 3

// 클래스
interface Service<T> {
  name: string;
  price: number;
  option: T;
}

const s1: Service<object> = {
  // 객체 내 속성이 정해져 있다면
  // <{color:string, coupon: boolean}>
  name: 's1',
  price: 10000,
  option: {
    color: 'red',
    coupon: false,
  },
};

const s2: Service<string> = {
  name: 's2',
  price: 10000,
  option: 'good',
};

interface Book {
  price: number;
}

const book: Book = { price: 4000 };

function showName<T extends { name: string }>(data: T): string {
  return data.name;
}

showName(s1);
showName(s2);
// showName(book);
// name이 없는 매개변수가 오면 error

https://www.youtube.com/watch?v=pReXmUBjU3E&list=PLZKTXPmaJk8KhKQ_BILr1JKCJbR0EGlx0&index=7 

 

728x90