Generic(제네릭)

"타입을 미리 지정 안하고 , 사용 시 지정하는 꼼수"

 

1.개념설명 & 예제

3.extends(제약)

 

 

1. 개념설명

function firstElements(elements: number[] | string[]) {
  return elements[0];
}

대충 이런 함수가 있다고 하자.

이 함수는 배열의 첫번쨰 놈만 뽑아 보여주는 함수다.

 

근데 이 함수에 1번 놈이 넘버,스트링 등등 자료형이 계속 바뀔 수가 있다.

그럴 때 쓰는 놈이다.

 

방법은 생각보다 쓰기 쉽더라.

1.= <변수> 넣어준다. (T가 관례임.)

2.호출시 함수<자료형>()

그럼 이 <변수>가 "사용시 지정하는 타입 매개변수"가  되는 것이다.

 

//1. 등호 오른쪽에 바로 <T> 써준다.
const firstElements2 = <T>(elements: T[]) => {return elements[0]}

//2. 호출 시 ===>  함수<자료형>(매개변수)

console.log(firstElements2<number>([1,2,3])
console.log(firstElements2<string | number>(["dd",2,3])

 

제네릭은 "넘겨주는 타입으로 치환이 되는거구나!"

뭘로 넘겨줬더라?

" = <변수> "

 

예제를 좀 더 보겠다.

type Tcar<T> = {
	name : string;
    option : T;
}
//Tcar 옆에 뚫은 구멍은 option의 타입이 된다.

const car1: TCar<string> = {
  name: "sonata",
  option: "auto",
};

const car2: TCar<number[]> = {
  name: "sonata",
  option: [1, 2, 3],
};

 

 

2. 제네릭에 제약을 거는 방법

extends를 사용하면 제네릭에 제약을 걸 수 있다.

이번거는 length속성이 있는 놈만 들어오도록 제약을 건 것이다.

(문자열,배열,유사배열객체~~~)

const getLength = <T extends { length: number }>(item: T): void =>
  console.log(item);

let hi = "hi";
let hi2 = "hi" as const;

 

 

 

 

내 입장에선 최종보스 같은 느낌이다.

프로젝트 할 때 자료형이 딱 정해져 있어서

솔직히 아직까진 필요성을 많이 못느꼈는데, 언젠가 쓸 곳이 있겠지 싶다.