타입스크립트 (TypeScript) - 제네릭(Generics)

출처 : 구글이미지

01. 제네릭(Generic)

제네릭이란 데이터의 타입을 일반화 하는것을 말한다. 자료형을 딱 정하지 않고 여러타입을 사용할 수 있게해준다. 의미가 바로 와닿지 않지만, 내용을 기록해보자면 이렇다.

 

타입스크립트는 정적언어(컴파일 시 변수의 타입이 결정)이다. 그렇기 때문에 함수나 클래스를 정의하는 시점에 변수, 반환값, 속성에 대해서 타입을 선언해야한다. 만약 지금 당장에 타입을 바로 선언하기가 힘든 경우가 있다. 이 때 제네릭을 사용하면 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 해준다. 한번의 선언으로 다양한 타입에 재사용이 가능하다는 장점이 있다.

 

제네릭을 쓸 때, T를 관용적으로 많이 사용한다. 코드를 기록해보자.

// 변수로 받은 값을 그대로 반환하는 함수
function message<T> (text: T): T {
  return text;
};

message("TS"); // "TS"
message(777) // 777
message(false) // false

// 함수안에 사용할 타입을 넘겨줄 수 있다.
message<string>("JS");
message<numbrt>(777);
message<boolean>(false);

// 동작
messge("Hello");

// 1. Hello라는 문자열을 넣었기 때문에, 제네릭 타입이 <string>으로 잡힌다.
message<string>()

// 2. 함수의 값으로 Hello를 넘기고
message<string>("Hello");

// 3. message 함수는 이렇게 정의된 것과 같다.
function message<string>(text: string): string {
  return message;
};

 제네릭의 동작도 기록해보았다. 변수를 받게 되면, 해당 변수의 타입으로 설정이 되고, 작성한 함수도 그와 맞게 타입들이 설정이 된다. 그렇다면 어짜피 저렇게 써놓고 아무거나 받아지게 되면 any를 쓰면 되지 않는가라는 생각이 든다. 일단 any를 써놓아도 타입과 관계없이 다 작동하니까 굳이 제네릭을 써야할까?

02. 제네릭과 any

class Cart{
  private list: any[] = [];  //뭐든 받을 수 있는 any

  push(order: any): void {
    this.list.push(order);
  };

  show(): any {
    return this.list.pop();
  }
}

const shoppingCart = new Cart();

abc.push(456);  // 숫자 데이터를 추가
abc.push('Top');  // 문자열 데이터 추가

abc.show().split('');  // 뒤에 들어간 "Top"을 가져와서 split
abc.show().split('');  // 다음은 숫자 456인데, split을 사용할 수 없어서 에러 발생

any를 사용하게 되면 일단 무엇이든지, Cart에 무지성으로 다 들어가게 된다. 마찬가지로, show를 사용하면, 어떤 타입이던지 간에 데이터를 가지고 나온다. 이때, 문자열을 나오게 해서 split을 사용하면 상관없이 잘 동작한다. 하지만 숫자값에서는 작동을 할 수가 없게된다. 그렇다면 이 코드를 제네릭으로 작성하면 어떻게 되는가!

class Cart<T>{ 
  private list: T[] = [];

  push(order: T): void {
    this.list.push(order);
  }

  show(): T {
    return this.list.pop();
  }
}

const numberCart = new Cart<number>();
numberCart.push(10000);
// numberCart("5000") 실수를 사전에 확인 가능
numberCart.push(+"5000");
numberCart.show() + 5000; 
numberCart.show() - 5000;  

const stringCart = new Cart<string>();
stringCart.push('TOP');
stringCart.push('BOTTOM');
stringCart.show().split('');  
stringCart.show().split('');

사용할 타입을 <number>, <string>처럼 미리 지정해서 만들어 주면, 숫자만 받는 numberCart에서 실수로 문자열을 쓰게 되면 사전에 확인할 수 있다. 이전에 any로 작성을 했을 때는, 타입과 상관없이 다 받았었고 그리고 메서드에 대한 에러가 발생하지만, 이제는 어떤 타입인지를 지정해 주었기 때문에 실수가 크게 줄게 된다!

 

공부.. 공부..