본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


TypeScript

Typescript 제네릭 그리고 any

야근없는 행복한 삶을 위해 ~
by 마샤와 곰 2019. 4. 26.

 

 

타입스크립트에서는 자바처럼 제네릭을 지원한다.

제네릭은 어떠한 데이터를 사용할지, 즉 적용할 데이터 형태를 사용자가 결정 해 주는 기능이다. 자바랑 같은 개념이다.

이와 더불어 any라는 자료형이 존재한다. any는 모든 것을 허용한다는 뜻으로 어떠한 데이터가 들어오던지 간에 상관없이 적용시켜주는 기능이다.

이러한 any 와 제네릭의 차이는 작업을 하는 경우에는 큰 차이를 느끼지 못하지만 작업이 끝나고 실제로 동작시키는 경우 확연하게 차이를 볼 수 있다.

아래는 any로 만든 변수이다.

var value : any = 1;
value = '1';
value = true;
value = [1,2,3];

value에는 어떠한 값이 들어오던지 간에 상관없이 전부 적용시켜준다.

아래코드를 살펴보자.

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

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

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

const abc = new Abcd();

abc.push(1234);  //데이터 넣기, 숫자
abc.push('a,a,a');  //데이터 넣기, 문자

abc.get().split(',');  //a,a,a 데이터를 가져와서 split
abc.get().split(',');  //숫자 1234를 가져와서 split, 런타임 오류

위 코드는 사용자에게 데이터를 받아서 배열에 넣는 클래스이다. 데이터 타입이 any이므로 push라는 메소드에서는 데이터 종류에 상관 없이 전부 데이터를 넣고 있으며,

마찬가지로 get이라는 메소드에서는 데이터 형태에 상관없이 반환한다.

문제는 마지막 코드로, 사용자가 split을 한 경우이다. 문자열에서는 상관없이 동작하지만 숫자에서는 당연히 동작을 할 수 없다.

이러한 경우를 대비해서 제네릭을 사용한다. 제네릭은 <T>로 표현한다.

class Abcd2<T>{ //제네릭 선언, 해당 제네릭에 의해 아래 T로 선언된 변수는 해당 자료형을 갖는다
  private list: T[] = [];

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

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

var typeNumber = new Abcd2<number>();
typeNumber.push(123);
typeNumber.push(456);
typeNumber.get() * 2;  //데이터 형태는 숫자
typeNumber.get() * 2;  //데이터 형태는 숫자

var typeString = new Abcd2<string>();
typeString.push('hello,word');
typeString.push('go,to,home');
typeString.get().split(',');  //데이터 형태는 문자
typeString.get().split(',');  //데이터 형태는 문자

클래스를 생성하는 과정에서 자료형을 지정하여 생성하면, T로 선언 된 모든 자료형이 클래스를 만들 때 선언한 자료형으로 영향을 받는다.

이렇게 되면 get이라는 메소드에서 리턴된 데이터 형태가 T로선언된 자료형에 영향을 받기 때문에 앞선 코드에서의 오류가 나지 않게된다.

마찬가지로 컴파일시에도 해당 자료형 여부에 따라 혹시나 잘못된 오류를 미리 확인 할 수 있게 된다.

반응형

'TypeScript' 카테고리의 다른 글

Typescript init, ES5 & ES6 그리고 상태변경  (0) 2019.04.26
Typescript 네임스페이스 그리고 Import  (2) 2019.04.26
Typescript 클래스  (5) 2019.04.26
Typescript 인터페이스  (0) 2019.04.26
Typescript 유니언(Union)  (0) 2019.04.26
* 위 에니메이션은 Html의 캔버스(canvas)기반으로 동작하는 기능 입니다. Html 캔버스 튜토리얼 도 한번 살펴보세요~ :)
* 직접 만든 Html 캔버스 애니메이션 도 한번 살펴보세요~ :)

댓글