제네릭이란❓

데이터의 타입을 일반화한다는 의미

여러가지 타입에서 동작하는 컴포넌트를 생성하는데 사용

타입의 변수화

유니온타입

interface dataType {
	id: string | number
}

타입을 함수의 파라미터 처럼 사용

const getText<T> = (text:T):T => {
 return text;
}

const getText = <T>(text:T[]):T[] => {
 return text;
}

getText(2)
getText('5')

제네릭 타입

interface GenericLogTextFn {
  <T>(text: T): T;
}

const getColor = <T>(text: T): T => {
  return text;
}

let myString: GenericLogTextFn = getColor; 

interface productResponse<T> {
	status: number;
	data: T;
}

async fetchData = <T>(url: string): Promise<productResponse<T>> {
	const response = await fetch(url);
	return {
		status: response.status;
		data: await response.json;
	}
}

(Type Aliases)

특정 타입이나 인터페이스를 참조할 수 있는 타입 변수

type TG<T> = T[] | T;

const number_arr: TG<number> = [1, 2, 3, 4, 5];
const number_arr2: TG<number> = 12345;

const string_arr: TG<string> = ['1', '2', '3', '4', '5'];
const string_arr2: TG<string> = '12345';

type vs interface
타입의 확장 가능 여부의 차이

소프트웨어는 언제나 확장이 용이해야하니까 가급적 확장 가능한 인터페이스로 선언하는게 좋음

function getProperty<T, K extends keyof T>(obj: T, key: K) {
   return obj[key];
}

let x = { a: 1, b: 2, c: 3, d: 4 };

getProperty(x, 'a'); // 성공
getProperty(x, 'm'); // 오류: 인수의 타입 'm' 은 'a' | 'b' | 'c' | 'd'에 해당되지 않음.

K extends keyof T : k가 T에 할당 가능해야한다

K는 T로 제한하는 의미

***화살표 함수에서 제네릭 사용시 에러

tsx에서 <>는 태그를 나타낼 때 사용하므로, 컴파일러에게 태그가 아닌 제네릭임을 알려 주어야 합니다. 

extends사용

  const GenericReturnFunc = <T extends {}>(arg: T): T => {
    return arg;
  };

  console.log(GenericReturnFunc(4));

{}는 원시타입(number, string..)을 포함한 모든 타입가능하나 Null이랑 undefined는 안됨

null이랑 undefined도 포함하고싶으면 unknown이용

  const GenericReturnFunc = <T extends unknown>(arg: T): T => {
    return arg;
  };

  console.log(GenericReturnFunc(4));

https://inpa.tistory.com/entry/TS-📘-타입스크립트-Generic-타입-정복하기

https://joshua1988.github.io/ts/guide/generics.html#제네릭-generics-의-사전적-정의