TIL- TypeScript Generic

Hyeongmin·2024년 3월 6일
1

 TIL (Today I Learned)

목록 보기
43/54

Generic

Generic(제네릭)은 '일반적인'이라는 뜻을 가지고 있다. 프로그래밍에서 제네릭을 사용한다는 것은, 특정한 타입을 지정하지 않고 다양한 타입에 대해 유연하게 코드를 작성할 수 있게 해준다. 쉽게 말해, 제네릭을 사용하면 하나의 함수나 클래스로 여러 종류의 타입을 처리할 수 있게 된다.

예를 들어, 상자에 물건을 담는 일을 한다고 생각해보자. 각기 다른 종류의 물건들이 있을 때, 각 물건을 담기 위해 상자의 크기나 형태를 매번 바꾸는 것은 비효율적이다.
여기서 '상자'가 제네릭에 해당하며, '물건'이 여러 종류의 타입이라고 생각할 수 있다. 제네릭을 사용하면, 다양한 물건들(타입들)을 담을 수 있는 '일반적인' 상자를 만들 수 있다. 이 상자는 물건(타입)에 따라 그 크기나 형태가 유연하게 변할 수 있다.


제네릭 사용 예

function wrapInArray<T>(value: T): T[] {
  return [value];
}

여기서 는 제네릭 타입을 나타낸다.
이 코드는 "어떤 타입(T)의 값을 받아서, 그 타입의 배열을 반환한다"는 의미를 가진다.
이 함수는 숫자, 문자열, 객체 등 어떤 타입의 값이든 받아서 배열로 만들 수 있다.

숫자를 넣으면 숫자 배열을 반환한다:

wrapInArray(5); // [5]

문자열을 넣으면 문자열 배열을 반환한다:

wrapInArray("hello"); // ["hello"]

제네릭은 인터페이스에도 사용할 수 있다.
예를 들어, 다양한 타입을 가질 수 있는 '결과' 객체를 정의하고 싶다면, 다음과 같이 할 수 있다.

interface Result<T> {
  value: T;
  error: string | null;
}

여기서 Result 인터페이스는 어떤 타입의 value를 가지고 있을 수 있으며, 오류 메시지를 위한 error 필드도 가지고 있다.
이렇게 하면, 숫자 결과, 문자열 결과 등 다양한 타입의 결과를 하나의 인터페이스로 처리할 수 있다.


function useGenericState<T>(initialState: T): [T, (newState: T) => void] {
  const [state, setState] = useState<T>(initialState);

  return [state, setState];
}

// 사용 예
const [count, setCount] = useGenericState(0);
const [name, setName] = useGenericState("");

여기서 useGenericState 함수는 초기 상태를 받아 현재 상태와 상태를 업데이트하는 함수를 배열로 반환한다. 이 훅은 숫자, 문자열, 객체 등 어떤 타입의 상태에도 사용할 수 있다.

0개의 댓글