제네릭 / 제네릭 타입 / 제네릭 인터페이스와 제네릭 타입 별칭

최종 수정 : 2024-05-28

제네릭(Generic)

제네릭 : 일반적인, 포괄적인

타입 파라미터로는 일반적으로 T, U, V를 사용하지만 아무렇게나 작성할 수 있다. 타입 파라미터는 여러 개를 사용할 수 있으며, 쉼표로 구분해주면 된다.

 

제네릭 함수

함수 이름 뒤에 <T>라고 작성한 것을 '타입 변수'라고 한다. 타입 변수를 선언하면, 함수를 호출할 때마다 타입이 추론된다.

타입 변수
= 타입 파라미터
= 제네릭 타입 변수
= 제네릭 타입 파라미터

function func<T>(value: T): T {
  return value;
}

let num = func(10); // number 타입
let bool = func(true); // boolean 타입
let str = func("string"); // string 타입

 

타입 변수 활용하기

타입 변수를 여러 개 사용할 수 있다.

function swap<T, U>(a: T, b: U) {
  return [b, a];
}

const [a, b] = swap("1", 2);

 

두 번째 사례

function returnFirstValue<T>(data: [T, ...unknown[]]) {
  return data[0];
}

let num = returnFirstValue([0, 1, 2]); // 0
let str = returnFirstValue([1, 'hello', 'mynameis']); // 1

 

세 번째 사례(제약)

function getLength<T extends { length: number }>(data: T) {
  return data.length;
}

let var1 = getLength([1, 2, 3]); // 3
let var2 = getLength("12345"); // 5
let var3 = getLength({ length: 10 }); // 10

---

타입스크립트에서 기본적으로 제공하는 제네릭 타입

JavaScript 기능들

1. querySelector() 함수

어떤 DOM 노드가 리턴될지 모르기 때문에 HTMLElement 라는 일반적인 타입으로 정의된다. 하지만 타입을 확신할 수 있는 경우에는 직접 제네릭 타입을 정의하면 된다.

const elem = document.querySelector<HTMLInputElement>('input.username');

 

2. Map

키와 밸류를 갖는 자료구조. 타입 파라미터로 키와 밸류의 타입을 정의하고 사용할 수 있다.

const peopleMap = new Map<string, People>();
peopleMap.set(people1.id, people1);
peopleMap.set(people2.id, people2);

 

3. Set

배열과 비슷하지만 중복된 요소를 추가할 수 없다. 수학에서 집합에 해당하는 자료구조. 타입 파라미터로 요소의 타입을 정의하고 사용할 수 있다.

const peopeleSet = new Set<People>();
peopleSet.add(people1);
peopleSet.add(people2);

 

4. forEach

 

---

제네릭 인터페이스, 제네릭 타입 별칭

제네릭 인터페이스 

 

유용한 타입들

키와 밸류 정하기 : Record

객체 프로퍼티 고르기 : Pick

객체의 프로퍼티 생략하기 : Omit

Union 제거하기 : Exclude

함수 파라미터 타입 가져오기 : Parameters

힘수 리턴 타입 가져오기 : ReturnType