TypeScript #7 제네릭 Generics

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

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

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

const arr2 = ["a", "b", "c"];
getSize(arr2) // 이렇게 매개변수의 타입이 바뀌었는데 동일한 함수를 재사용 하고싶다면
              // 함수 오버로드를 사용하던가 유니온 타입을 사용할 수 있다.

// 사용예제
function getSize2<T>(arr: T[]):number { // <>꺽쇠에 대문자 T를 적어준다, 이를 타입파라미터라고 한다. X나 A이런것을 적어도 상관없다.
  return arr.length;
}

const arr3 = [1, 2, 3];
getSize2<number>(arr3); // 3
// 사용하는 쪽에서 꺽쇠로 타입을 적어준다.

const arr4 = ["a", "b", "c"];
getSize2<string>(arr4)

const arr5 = [false, true, true];
getSize2(arr5)
// 사실 꺽쇠로 기입해주지 않아도 타입스크립트는 전달되는 매개변수를 보고 타입을 알아서 리턴해준다.

const arr6 = [{}, {}, {name: "Tim"}];
getSize2(arr6)

// 인터페이스 사용예제
interface Mobile<T> {
  name: string;
  price: number;
  // option: any; // 어떤 데이터가 올지 모르는 상태, 이럴 때 제너릭을 쓸 수 있다.
  option: T;
}

const m1: Mobile<object> = { // option의 타입이 객체니까
  name: "s21",
  price: 1000,
  option: {
    color: "red",
    coupon: false,
  },
};

const m2: Mobile<string> = {// option의 타입이 string이니까
  name: "s21",
  price: 1000,
  option: "good",
};

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 // 에러발생! Book에는 name이 없기 때문이다.
}
////
function showName<T extends {name:string}>(data:T): string {
  return data.name // 이렇게 바꿔주면 name이 string인 형태를 확장한 형태이다라고 알려준다.
                   
}

showName(user);
showName(car);
showName(book);