재사용 가능한 컴포넌트를 만들어주는 Generic

이주희·2022년 3월 27일
0

JavaScript

목록 보기
10/49

참조 문서
[Docs : Generics]

Generics

제네릭을 이용하면 단일 타입이 아닌 다양한 타입에서 작동하는 재사용 가능한 컴포넌트를 만들 수 있다.
함수 또는 클래스를 정의하는 시점에 매개변수나 반환값의 타입을 선언하기 어려운 경우에도 활용할 수 있다!

타입으로 any를 쓰는 것은 함수의 arg가 어떤 타입이든 받을 수 있다는 점에서 제네릭이다.
하지만 실제로 함수가 반환할 때 어떤 타입인지에 대한 정보는 잃게 된다.
(number를 넘겨도 any 타입이 반환된다는 정보만 얻는다.)

무엇이 반환되는지 표시하기 위해 값이 아닌 타입에 적용되는 타입 변수를 사용한다.

타입 변수

function identity<Type>(arg: Type): Type {
  return arg;
}

위에서 Type은 유저가 준 인수의 타입을 캡처하고 반환 타입으로 다시 사용한다.
여기서 identity 함수는 타입을 불문하고 동작하므로 제네릭이라 할 수 있다.
(타입 이름은 다른 거 써도 됨ㅎㅎ 보통 T 사용)

타입 변수 호출 방법 2가지

  1. 함수에 타입 인수를 포함한 모든 인수를 전달한다.
//string으로 명시해주고, 인수 주변에 () 대신 <>로 감싸준다.
let output = identity<string>("myString"); // 출력 타입은 'string'입니다.
	let output: string
  1. 타입 인수 추론을 사용한다. - 일반적인 방법
//전달하는 인수에 따라 컴파일러가 Type의 값을 자동으로 정하게 한다.
let output = identity("myString"); // 출력 타입은 'string'입니다.
	let output: string

(컴파일러가 타입을 유추할 수 없는 경우엔 명시적인 타입 인수 전달이 필요하다.)

profile
🍓e-juhee.tistory.com 👈🏻 이사중

0개의 댓글