티스토리 뷰

 

🍞 제네릭 클래스

클래스의 이름 뒤에 타입 변수를 선언하면 제네릭 클래스가 된다.

 

Number 타입의 리스트를 생성하는 클래스를 만들어보자.

class NumberList {
    constructor(private list: number[]){}

    push(data: number){
        this.list.push(data);
    }

    pop(){
        return this.list.pop();
    }

    print(){
        console.log(this.list);
    }
}
  • list 필드를 private으로 설정해 클래스 내부에서만 접근할 수 있도록 한다.
  • 새로운 요소를 추가하는 push, 제거하는 pop, 출력하는 print 메소드를 만들어 준다.

이 NumberList 클래스로 인스턴스를 만들어 사용해보자.

const numberList = new NumberList([1, 2, 3]);

numberList.pop();
numberList.push(4);
numberList.print(); // [1, 2, 4]

정상적으로 잘 작동하고 있다.

 

그런데 여기서 만약 동일한 구조를 가진 StringList 클래스를 만들어야 한다면 어떻게 할까?

새로운 클래스를 하나 더 만드는 것은 매우 비효율적일 것이다.

// NumberList 클래스
class NumberList {
    constructor(private list: number[]){}

    push(data: number){
        this.list.push(data);
    }

    pop(){
        return this.list.pop();
    }

    print(){
        console.log(this.list);
    }
}

// StringList 클래스
class StringList {
  constructor(private list: string[]) {}

	push(data: string) {
    this.list.push(data);
  }

  pop() {
    return this.list.pop();
  }

  print() {
    console.log(this.list);
  }
}

const numberList = new NumberList([1, 2, 3]);
const numberList = new StringList(["1", "2", "3"]);

여기서 추가로 모든 리스트에 동일한 메소드가 추가되거나 동작이 수정되야 한다면? 일일이 바꾸는 것에는 한계가 존재할 것이다.

 

 

 

 

따라서 제네릭 클래스를 이용해 여러 타입의 리스트를 생성할 수 있는 범용적인 클래스를 정의한다.

// 동일한 형태의 StringList 클래스도 필요하다면?
// -> 새로운 클래스를 하나 더 만드는 대신 제네릭 클래스로 만들기
class List<T> {
    constructor(private list: T[]){}

    push(data: T){
        this.list.push(data);
    }

    pop(){
        return this.list.pop();
    }

    print(){
        console.log(this.list);
    }
}

const numberList2 = new List([1, 2, 3]);

numberList.pop();
numberList.push(4);
numberList.print(); // [1, 2, 4]

const stringList = new List(['1', '2']);

stringList.pop();
stringList.push('hello');
stringList.print(); // ['1', 'hello']
  • 클래스의 이름 뒤에 타입 변수를 선언한다.

타입 변수는 클래스 내부에서 자유롭게 사용이 가능하며 생성자를 통해 타입 변수의 타입을 추론할 수 있기 때문에 생성자에 인수로 전달하는 값이 있을 경우 타입 변수에 할당할 타입을 생략해도 된다.

 

만약 타입 변수의 타입을 직접 설정하길 원하는 경우 명시해주면 된다.

const numberList = new List<number>([1, 2, 3]);
const stringList = new List<string>(['1', '2']);

 

 

 

 

 


🔗 타입스크립트 강의

 

한 입 크기로 잘라먹는 타입스크립트(TypeScript) - 인프런 | 강의

문법을 넘어 동작 원리와 개념 이해까지 배워도 배워도 헷갈리는 타입스크립트 이제 제대로 배워보세요! 여러분을 타입스크립트 마법사🧙🏻‍♀️로 만들어드립니다., 프론트엔드의 피할 수

www.inflearn.com

 

728x90