📌 타입을 함수의 파라미터처럼 사용하는 문법

타입을 넘겨 타입을 받는다.

제네릭을 이용하면 class나 함수, interface를 다양한 type으로 재사용할 수 있다.

선언할 땐, type 파라미터만 적어주고

생성하는 시점에서 사용하는 type을 결정한다.

✏️ EX 1)

function getText<T>(text: T) {
	return text;
}
const message = getText<string>('hi');
const useId = getText<number>(100);

✏️ EX 2)

❌
interface Person {
  name: string;
  age: number;
}

interface User {
  name: string;
  age: string;
}

interface Id {
  name: string;
  age: boolean;
}

const jane: Person = {
  name: 'Jane',
  age: 11,
}

const tom: User = {
  name: 'Tom',
  age: '11'
}

const peter: Id = {
  name: 'Peter',
  age: true,
}

⭕️
interface Anyone <T> {
	name: string;
	age: T;
}

const mac: Anyone<number> = {
	name: 'Mac',
	age: 10,
} 

const jerry: Anyone<string> = {
	name: 'Jerry',
	age: '12',
}

const trudy: Anyone<boolean> = {
	name: 'Trudy',
	age: true,
}

✏️ EX 3)

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

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

const arr2 = ["a", "b", "c"];
getSize(arr2)

const arr3 = [false, true, false];
getSize(arr3)

const arr4 = [{}, {}, {name: "Tom"}];
getSize(arr4)

유니온 타입을 이용하여 타입을 늘려가는건 좋지 않은 코드이다.(재사용성 측면)

• 타입 파라미터를 활용하기

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

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

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

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

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

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

const m1: Mobile<{color: string, coupon: boolean}> = {
  name: "s21",
  price: 1000,
  option: {
    color: "black",
    coupon: false
  }
}

const m2: Mobile<string> = {
  name: "s22",
  price: 2000,
  option: "good"
}