코딩앙마😈 님의 6.제네릭 을 보고 정리한 내용입니다.

Generic🤔?

선언 시 타입 매개변수로 작성하고, 생성 시점에 타입 결정.
함수, 클래스, 인터페이스에서 사용 가능

함수에서 제네릭

// 배열의 사이즈 구하는 함수 정의 시 배열값들의 타입을 다양하게 받고 싶을 경우
function getSize(x : (number| string )[]) : number{
  return x.length;
}
getSize([1,2,3]) // 3
getSize(['a','b']) // 2
getSize([true, false, true]) //🚨ERROR! (boolean 타입 없음)

// -> union type으로 작성하기엔 예외사항 생길때마다 추가해줘야함.
// -> Generic으로 설정하여 생성 시점에 타입 결정

function getSize<T>(x : T[]) : number{
  return x.length;
}
// ** T: 타입 파라미터로, 특정 타입 전달받아 함수에서 사용 가능.
// 커스텀 타입도 설정 가능.

getSize([1,2,3]) // 3
getSize(['a','b']) // 2
getSize([true, false, true]) // 3

인터페이스 제네릭

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

// 생성 시점에 타입 파라미터 
type Option = {color: string, coupon: boolean}
//커스텀 옵션도 가능
const m1: Mobile<Option> = {
	name : 's21',
  	price: 1000,
  	option :{ color: 'red', coupon: false}
}

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

generic 에 extends 사용하기

interface User{
	name: string
  	age: number
}

interface Car{
  	name: string
  	color: string
}
interface Book {
	price: number
}

const user:User ={name : 'a', age: 10}
const car:Car = {name: 'bmw', color: 'red'}
const book:Book = {price:3000}

function showName<T>(data :T) : string{ 
  return data.name;   // 🚨ERROR! T에 name이 있다고 장담할 수 없음
}
showName(user);
showName(car); 


// showName에서 에러가 발생하지 않도록 T를 extends해줌
function showName<T extends {name:string}>(data :T) : string{ 
  return data.name; // 🙆‍♀️
}