[TypeScript] 제네릭을 사용하는 이유

(이미지 출처: ichi.pro)

 

먼저 함수 하나를 살펴보자.

문자열을 인자로 받아 그대로 반환하는 함수이다.

const echoText = (text: string): string => {
  return text;
}

 

만약 문자열이 아니라 숫자를 인자로 넣고싶다면 어떻게 해야할까?

혹은 불린값을 인자로 넣고싶다면? any 타입을 사용하면 되지 않을까?

const echoText = (text: any): any => {
  return text;
}

함수는 잘 작동할 것이다.

하지만 인자로 어떤 타입이 들어갔고, 어떤 타입이 반환되는지는 알 수 없다.

 

이럴 때 사용하는 것이 제네릭이다.

T라는 문자로 인자의 타입을 제네릭하게 (포괄적으로) 표현했다.

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

---

이번에는 클래스에 제네릭을 활용해보자.

두 개의 인자를 받아 left 또는 right를 리턴하는 클래스이다.

각 인자의 타입을 L, R로 제네릭하게 (포괄적으로) 표현했다.

interface IEither<L, R> {
  left: () => L;
  right: () => R;
}

class Either<L, R> implements IEither<L, R> {
  constructor(private leftValue: L, private rightValue: R) {}
  left(): L {
    return this.leftValue;
  }
  right(): R {
    return this.rightValue;
  }
}

 

이제 Either 객체를 생성해보자.

const either = new SimpleEither(3, 'Noah');
either.left();		// 3
either.right();		//'Noah"

생성된 either는 Either<number, string> 타입을 따르게 된다.