Skip to content

7. 제네릭(Generics)

1. 제네릭의 사전적 정의

  • 제네릭은 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용된다.
  • 특히, 한 가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는 데 사용된다.


2. 제네릭의 한 줄 정의와 예시

  • 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미한다.


function getText(text) {
  return text;
}


  • 위 함수는 text라는 파라미터에 값을 넘겨 받아 text를 반환해 준다.
  • hi, 10, true 등 어떤 값이 들어가더라도 그대로 반환한다.


getText("hi"); // 'hi'
getText(10); // 10
getText(true); // true


  • 이 관점에서 제네릭을 한 번 살펴보자.


function getText<T>(text: T): T {
  return text;
}


  • 위 함수는 제네릭 기본 문법이 적용된 형태이다.
  • 이제 함수를 호출할 때 다음과 같이 함수 안에서 사용할 타입을 넘겨줄 수 있다.


getText<string>("hi");
getText<number>(10);
getText<boolean>(true);


  • 위 코드 중 getText<string>("hi")를 호출했을 때 함수에서 제네릭이 어떻게 동작하는지 살펴보자.


function getText<T>(text: T): T {
  return text;
}


  • 먼저 위 함수에서 제네릭 타입이 <string>이 되는 이유는 getText() 함수를 호출할 때 제네릭(함수에서 사용할 타입) 값으로 string을 넘겼기 때문이다.


getText<string>();


  • 그리고 나서 함수의 인자로 hi라는 값을 다음과 같이 넘기게 된다.


getText<string>("hi");


  • getText 함수는 다음과 같이 타입을 정의한 것과 같다.


function getText<string>(text: string): string {
  return text;
}


  • 위 함수는 입력 값의 타입이 string이면서 반환 값 타입도 string이어야 한다.


3. 제네릭을 사용하는 이유

  • 또 다른 예제를 살펴보자.


function logText(text: string): string {
  return text;
}


  • 위 코드는 인자를 하나 넘겨 받아 반환해 주는 함수이다.
  • 여기서 이 함수의 인자와 반환 값은 모두 string으로 지정되어 있지만 만약 여러 가지 타입을 허용하고 싶다면 다음과 같이 any를 사용할 수 있다.


function logText(text: any): any {
  return text;
}


  • 이렇게 타입을 바꾼다고 해서 함수의 동작에 문제가 생기진 않는다.
  • 하지만, 함수의 인자로 어떤 타입이 들어갔고 어떤 값이 반환되는지 알 수가 없다.
  • 왜냐하면 any라는 타입은 타입 검사를 하지 않기 때문이다.


  • 이러한 문제점을 해결할 수 있는 것이 제네릭이다.


function logText<T>(text: T): T {
  return text;
}


  • 먼저 함수의 이름 바로 뒤에 <T>라는 코드를 추가했다.
  • 그리고 함수의 인자와 반환 값에 모두 T라는 타입을 추가한다.
  • 이렇게 되면 함수를 호출할 때 넘긴 타입에 대해 타입스크립트가 추정할 수 있게 된다.
  • 따라서, 함수의 입력 값에 대한 타입과 출력 값에 대한 타입이 동일한지 검증할 수 있게 된다.


  • 그리고 이렇게 선언한 함수는 다음과 같이 두 가지 방법으로 호출할 수 있다.


function logText<T>(text: T): T {
  return text;
}

// #1
const textOne = logText<string>("Hello Generic");

// #2
const textTwo = logText("Hello Generic");


  • 보통 두 번째 방법이 코드도 더 짧고 가독성이 좋기 때문에 흔하게 사용된다.
  • 그렇지만 만약 복잡한 코드에서 두 번째 코드로 타입 추정이 되지 않는다면 첫 번째 방법을 사용하면 된다.


4. 제네릭 타입 변수

  • 앞에서 배운 내용으로 제네릭을 사용하기 시작하면 컴파일러에서 인자에 타입을 넣어달라는 경고를 보게 된다.


function logText<T>(text: T): T {
  return text;
}


  • 만약 여기서 함수의 인자로 받은 값의 length를 확인하고 싶다고 하면 아마 다음과 같이 코드를 작성할 것이다.


function logText<T>(text: T): T {
  console.log(text.length); // error
  return text;
}


  • 위 코드를 변환하려고 하면 컴파일러에서 에러를 발생시킨다.
  • 왜냐하면 text에 .length가 있다는 단서는 어디에도 없기 때문이다.


  • 다시 위 제네릭 코드의 의미를 살펴보면 함수의 인자와 반환 값에 대한 타입을 정하진 않았지만, 입력 값으로 어떤 타입이 들어왔고 반환 값으로 어떤 타입이 나가는지 알 수 있다.
  • 따라서, 함수의 인자와 반환 값 타입에 마치 any를 지정한 것과 같은 동작을 한다는 것을 알 수 있다.
  • 그래서 인자에 number 타입을 넘기더라도 에러가 나진 않는다.
  • 이러한 특성 때문에 현재 인자인 text에 문자열이나 배열이 들어와도 아직은 컴파일러 입장에서 .length를 허용할 순 없다.


  • 그래서 이런 경우에는 다음과 같이 제네릭에 타입을 줄 수 있다.


function logText<T>(text: T[]): T[] {
  console.log(text.length); // 제네릭 타입이 배열이기 때문에 `length`를 허용한다.
  return text;
}


  • 위 코드가 기존의 제네릭 코드와 다른 점은 인자의 T[] 부분이다.
  • 이 제네릭 함수 코드는 일단 T라는 변수 타입을 받고, 인자 값으로는 배열 형태의 T를 받는다.
  • 예를 들면, 함수에 [1, 2, 3]처럼 숫자로 이루어진 배열을 받으면 반환 값으로 number를 돌려주는 것이다.
  • 이런 방식으로 제네릭을 사용하면 꽤 유연한 방식으로 함수의 타입을 정의해 줄 수 있다.


  • 혹은 다음과 같이 좀 더 명시적으로 제네릭 타입을 선언할 수 있다.


function logText<T>(text: Array<T>): Array<T> {
  console.log(text.length); // 제네릭 타입이 배열이기 때문에 `length`를 허용한다.
  return text;
}


5. 제네릭 타입

  • 제네릭 인터페이스에 대해 알아보자.
  • 다음의 두 코드는 같은 의미이다.


function logText<T>(text: T): T {
  return text;
}

// #1
let strOne: <T>(text: T) => T = logText;

// #2
let strTwo: { <T>(text: T): T } = logText;


  • 위와 같은 변형 방식으로 제네릭 인터페이스 코드를 다음과 같이 작성할 수 있다.


interface GenericLogTextFn {
  <T>(text: T): T;
}

function logText<T>(text: T): T {
  return text;
}

let myString: GenericLogTextFn = logText;


  • 위 코드에서 만약 인터페이스에 인자 타입을 강조하고 싶다면 다음과 같이 변경할 수 있다.


interface GenericLogTextFn<T> {
  (text: T): T;
}

function logText<T>(text: T): T {
  return text;
}

let myString: GenericLogTextFn<string> = logText;


  • 이와 같은 방식으로 제네릭 인터페이스뿐만 아니라 클래스도 생성할 수 있다.
  • 다만, 이넘과 네임스페이스는 제네릭으로 생성할 수 없다.


6. 제네릭 클래스

  • 제네릭 클래스는 앞에서 살펴본 제네릭 인터페이스와 비슷하다.


class GenericMath<T> {
  pi: T;
  sum: (x: T, y: T) => T;
}

let math = new GenericMath<number>();


  • 제네릭 클래스를 선언할 때 클래스 이름 오른쪽에 <T>를 붙여준다.
  • 그리고 해당 클래스로 인스턴스를 생성할 때 타입에 어떤 값이 들어갈지 지정하면 된다.


7. 제네릭 제약 조건

  • 앞의 제네릭 타입 변수에서 살펴본 내용 말고도 제네릭 함수에 어느 정도 타입 힌트를 줄 수 있는 방법이 있다.
  • 먼저 이전 코드를 살펴보자.


function logText<T>(text: T): T {
  console.log(text.length); // error
  return text;
}


  • 인자의 타입에 선언한 T는 아직 어떤 타입인지 구체적으로 정의하지 않았기 때문에 length 코드에서 오류가 난다.
  • 이럴 때 만약 해당 타입을 정의하지 않고도 length 속성 정도는 허용하려면 다음과 같이 작성한다.


interface LengthWise {
  length: number;
}

function logText<T extends LengthWise>(text: T): T {
  console.log(text.length);
  return text;
}


  • 위와 같이 작성하게 되면 타입에 대한 강제는 아니지만 length에 대해 동작하는 인자만 넘겨받을 수 있게 된다.


interface LengthWise {
  length: number;
}

function logText<T extends LengthWise>(text: T): T {
  console.log(text.length);
  return text;
}

logText(10); // error. 숫자 타입에는 `length`가 존재하지 않으므로 오류 발생
logText({ length: 0, value: "hi" }); // `text.length` 코드는 객체의 속성 접근과 같이 동작하므로 오류 없음


8. 객체의 속성을 제약하는 방법

  • 두 객체를 비교할 때도 제네릭 제약 조건을 사용할 수 있다.


function getProperty<T, O extends keyof T>(obj: T, key: O) {
  return obj[key];
}
let obj = { a: 1, b: 2, c: 3 };

getProperty(obj, "a"); // okay
getProperty(obj, "z"); // error. "z"는 "a", "b", "c" 속성에 해당하지 않습니다.


  • 제네릭을 선언할 때 <O extends keyof T> 부분에서 첫 번째 인자로 받는 객체에 없는 속성들은 접근할 수 없게끔 제한하였다.

References