본문 바로가기

프론트엔드/타입스크립트

지네릭

반응형

타입제한은 오류를 사전에 발견할 수 있게 하여 안정성을 높이지만 반대로 정해진 타입만 사용가능하므로 코드의 재사용성을 감소시킵니다. 지네릭은 타입제한을 통한 안정성과 코드의 재사용성을 함께 제공하는데요. 코드를 통해 어떻게 지네릭이 사용되는지 보겠습니다.

 

타입제한 없음

먼저, 아무런 타입제한이 없는 경우의 코드입니다. 타입의 제한이 없기 때문에 배열에 아무런 값이나 들어갈 수 있습니다.

// generic.ts

class storage {
  private data:any[] = [];

  addData(newData) {
    this.data.push(newData)
  }
}

const data = new storage();
data.addData('new')
data.addData(1)

타입제한

하지만, 해당 배열에서 처리되어야 하는 값이 문자라면 타입제한을 통해 잘못된 타입이 들어오는 것을 막는 것이 이후 발생가능한 논리적 오류를 방지하겠죠.

반면에, 타입제한으로 인해 해당 클래스의 메서드가 받을 수 있는 매개변수는 오직 문자로 제한되어 다른 타입을 저장하거나 처리하는 용도로 사용이 불가능해집니다.

Genetic

이때, genetic을 통해 클래스에 타입 홀더를 두고 이를 활용한다면 클래스를 인스턴스화할 때 타입을 지정하여 하나의 메서드로 다양한 타입의 처리가 가능해집니다.

// genetic.ts

class storage<T> {
  private data: T[] = []

  addData(newData: T) {
    this.data.push(newData)
  }
}

const dataString = new storage<string>()
dataString.addData('ne')
dataString.addData('test')

const dataNumber = new storage<number>()
dataNumber.addData(1)
dataNumber.addData(2)

이상으로 Genetic에 대해서 알아보았습니다.

소스코드

https://github.com/jin-co/web-mobile/tree/master/TypeScript

 

GitHub - jin-co/web-mobile

Contribute to jin-co/web-mobile development by creating an account on GitHub.

github.com

 

728x90
반응형

'프론트엔드 > 타입스크립트' 카테고리의 다른 글

데코레이터  (5) 2023.02.16
인터페이스  (4) 2023.02.04
타입스크립트  (0) 2023.02.01