코딩/한 입 크기로 잘라먹는 타입스크립트
[TypeScript] 제네릭 클래스
김기지
2023. 9. 15. 22:22
🍞 제네릭 클래스
클래스의 이름 뒤에 타입 변수를 선언하면 제네릭 클래스가 된다.
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