제네릭 클래스와 인터페이스

제네릭 함수는 호출할 때마다 타입 매개변수가 정해졌습니다. 그런데 값을 담아 두고 여러 메서드로 넣고 꺼내는 클래스라면, 한 번 정한 타입이 그 객체의 모든 메서드에 함께 적용되어야 합니다. 숫자를 담기로 한 상자에 나중에 문자열을 넣을 수 있으면 안 되기 때문입니다.

이 글은 클래스와 인터페이스에 타입 매개변수를 두어, 저장한 값과 메서드의 입력과 출력을 한 타입으로 잇는 방법을 봅니다. 마지막으로 제약을 붙인 저장소 클래스를 만들고, 타입이 보장하는 것과 보장하지 않는 것을 실행 결과로 확인합니다. 예제는 ts-first 프로젝트에 generic-classes.ts를 만들고 include를 그 파일로 바꾸어 확인합니다.

제네릭 클래스

클래스 이름 뒤에 <T>를 적으면, 그 클래스의 속성과 메서드에서 T를 쓸 수 있습니다. 인스턴스를 만들 때 T가 정해지고, 그 인스턴스의 모든 멤버에 같은 타입이 적용됩니다.

class Box<T> {
  private _value: T;

  constructor(value: T) {
    this._value = value;
  }

  getValue(): T {
    return this._value;
  }

  setValue(newValue: T): void {
    this._value = newValue;
  }

  isSameAs(otherValue: T): boolean {
    return this._value === otherValue;
  }
}

const numberBox = new Box<number>(123);
console.log(numberBox.getValue());
numberBox.setValue(456);
console.log(numberBox.getValue(), numberBox.isSameAs(456));

const inferredBox = new Box("Hello");
console.log(inferredBox.getValue().toUpperCase());

123
456 true
HELLO

new Box<number>(123)으로 T를 number로 정하면, _value와 setValue의 인수, getValue의 반환값이 모두 number가 됩니다. 그래서 numberBox.setValue("abc")는 Argument of type 'string' is not assignable to parameter of type 'number'.로 진단됩니다. 타입 인수를 적지 않은 new Box("Hello")는 생성자의 인수에서 T를 string으로 추론하므로, 꺼낸 값에 문자열의 메서드를 쓸 수 있습니다.

위 그림은 numberBox가 123을 담았다가 456으로 바뀌는 과정을 단계별로 보여 줍니다. 타입 인수 하나가 저장한 값과 메서드의 입출력을 함께 묶는 것이며, Box<number>와 Box<string>이 서로 다른 자바스크립트 클래스를 만드는 것은 아닙니다. 컴파일한 코드에는 T가 지워진 Box 클래스 하나만 남습니다.

T는 담을 값의 타입을 정할 뿐, 값을 어떻게 비교하거나 복사할지는 정하지 않습니다. 객체를 담으면 그 차이가 드러납니다.

const originalItem = { score: 10 };
const itemBox = new Box(originalItem);

console.log(itemBox.isSameAs(originalItem));
console.log(itemBox.isSameAs({ score: 10 }));
originalItem.score = 12;
console.log(itemBox.getValue().score);

true
false
12

isSameAs의 ===는 객체의 내용이 아니라 같은 객체인지를 비교하므로, 내용이 같은 새 객체 { score: 10 }과는 false입니다. 생성자는 객체를 복사하지 않고 받은 참조를 그대로 저장했으므로, 원래 변수로 score를 바꾸면 상자 안에서도 12가 보입니다. 복사할지, 내용으로 비교할지, 바꾸지 못하게 할지는 제네릭이 아니라 클래스의 구현이 정합니다.

제네릭 인터페이스

인터페이스에도 타입 매개변수를 둘 수 있습니다. 다음 KeyValuePair<K, V>는 키와 값의 타입을 각각 받아, 쓰는 곳마다 다른 조합의 쌍을 나타냅니다.

interface KeyValuePair<K, V> {
  key: K;
  value: V;
}

class DataStore<T> implements KeyValuePair<string, T> {
  constructor(public key: string, public value: T) {}

  print(): void {
    console.log(`Key: ${this.key}, Value: ${this.value}`);
  }
}

const pair: KeyValuePair<number, boolean> = { key: 1, value: true };
const userStore = new DataStore("user_id", "u12345");
const productStore = new DataStore("product_code", 98765);

console.log(pair.key, pair.value);
userStore.print();
productStore.print();

1 true
Key: user_id, Value: u12345
Key: product_code, Value: 98765

DataStore<T>는 KeyValuePair<string, T>를 구현하므로 키는 언제나 문자열이고, 값의 타입은 인스턴스마다 정해집니다. userStore는 DataStore<string>, productStore는 DataStore<number>로 추론되며, 클래스의 타입 매개변수를 구현할 인터페이스의 타입 인수로 그대로 넘긴 것입니다.

인터페이스의 호출 시그니처에 타입 매개변수를 쓰면, 입력과 출력의 타입을 쓰는 곳마다 정할 수 있는 함수 타입이 됩니다.

interface ProcessCallback<T, V> {
  (data: T): V;
}

const upper: ProcessCallback<string, string> = (input) => input.toUpperCase();
const sum: ProcessCallback<number[], number> = (values) => values.reduce((total, value) => total + value, 0);

console.log(upper("hello"), sum([1, 2, 3, 4, 5]));

HELLO 15

ProcessCallback<number[], number>로 정하면 매개변수 values가 문맥으로 number[]가 되고, 반환값은 number여야 합니다. 같은 인터페이스로 문자열을 바꾸는 함수와 숫자를 모으는 함수를 모두 나타낼 수 있습니다.

더 깊이: 타입 인수가 다른 제네릭 타입끼리의 할당과 변성

Dog가 Animal을 확장할 때, Getter<Dog>를 Getter<Animal> 자리에 넣을 수 있는지는 T가 어느 자리에 쓰이는지에 달려 있습니다. TypeScript 4.7 릴리스 노트의 예로 보면, 값을 돌려주는 type Getter<T> = () => T는 Dog가 Animal에 할당되는 방향과 같은 방향으로 할당되므로 공변(covariant)입니다. 값을 받는 type Setter<T> = (value: T) => void는 방향이 뒤집혀 Animal이 Dog에 할당되어야 하므로 반공변(contravariant)이고, 두 자리에 모두 쓰면 T가 같아야만 서로 바꿀 수 있는 불공변(invariant)이 됩니다. 이렇게 타입 인수의 관계가 제네릭 타입의 관계로 이어지는 방식을 변성(variance)이라고 합니다.

구조적 타입 시스템에서는 원래 변성을 따로 따질 필요가 없습니다. 타입 인수를 넣어 본 뒤 멤버를 하나씩 비교하면 되기 때문입니다. 그런데 릴리스 노트에 따르면 컴파일러는 최적화를 위해 타입 매개변수의 변성을 미리 계산해 두고, 큰 타입을 비교할 때 구조 전체 대신 타입 인수만 비교합니다. 이 계산은 순환하는 타입에서 정확한 답을 내지 못할 수 있어서, 릴리스 노트는 오류여야 할 할당이 통과하는 예도 보여 줍니다.

4.7부터는 Getter<out T>, Setter<in T>, State<in out T>처럼 변성을 직접 적을 수 있습니다. 적은 표시가 실제 구조와 맞지 않으면, 예를 들어 값을 받는 메서드가 있는데 out만 적으면 컴파일러가 진단합니다. 다만 필요한 것보다 엄격하게 적는 것은 막지 않으므로, 릴리스 노트는 모든 매개변수에 붙이기보다 깊게 재귀하는 타입을 다루는 라이브러리처럼 정확도와 검사 속도가 문제가 될 때 신중하게 쓰라고 권합니다.

제약을 붙인 저장소

클래스의 타입 매개변수에도 앞 글의 제약을 붙일 수 있습니다. 다음 저장소는 id 속성이 있는 객체만 다루므로, 어떤 모델이든 id로 찾을 수 있습니다.

interface HasId {
  id: string | number;
}

class IdentifiableRepository<T extends HasId> {
  private items: T[] = [];

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

  findById(id: string | number): T | undefined {
    return this.items.find((item) => item.id === id);
  }
}

interface User extends HasId {
  name: string;
  email: string;
}

interface Product extends HasId {
  name: string;
  price: number;
}

const userRepository = new IdentifiableRepository<User>();
userRepository.add({ id: 1, name: "Alice", email: "[email protected]" });
console.log(userRepository.findById(1));

const productRepository = new IdentifiableRepository<Product>();
productRepository.add({ id: "P001", name: "Laptop", price: 1200 });
console.log(productRepository.findById("P001"));

{ id: 1, name: 'Alice', email: '[email protected]' }
{ id: 'P001', name: 'Laptop', price: 1200 }

IdentifiableRepository<User>에서는 add가 User만 받고 findById가 User | undefined를 돌려주므로, 저장하는 값과 찾는 값의 타입이 한 모델로 이어집니다. id가 없는 타입으로 만든 new IdentifiableRepository<string>()은 Type 'string' does not satisfy the constraint 'HasId'.로 진단됩니다.

위 그림은 저장소가 받은 객체의 참조를 배열에 넣고, findById가 ===로 앞에서부터 비교해 처음 맞는 객체나 undefined를 돌려주는 과정을 보여 줍니다. 이 구현이 보장하지 않는 것은 다음 실행으로 드러납니다.

const practiceRepository = new IdentifiableRepository<User>();
const firstUser: User = { id: 2, name: "민지", email: "[email protected]" };
practiceRepository.add(firstUser);
practiceRepository.add({ id: 2, name: "지수", email: "[email protected]" });

console.log(practiceRepository.findById(2)?.name);
console.log(practiceRepository.findById("2"));
firstUser.name = "민";
console.log(practiceRepository.findById(2)?.name);

민지
undefined
민

같은 id의 사용자를 두 번 넣어도 막지 않으며, find는 처음 맞는 민지를 돌려줍니다. 숫자 2와 문자열 "2"는 ===로 같지 않으므로 두 번째 조회는 실패해 undefined이고, 그래서 결과를 쓸 때는 ?.name처럼 없는 경우를 처리해야 합니다. 저장한 객체를 복사하지 않았으므로 원래 변수로 이름을 바꾸면 저장소에서도 민이 보이며, 중복을 막거나 저장해 두는 일은 이 메모리 저장소의 범위 밖입니다. 제네릭 클래스의 문법은 공식 Handbook의 제네릭 클래스에 있습니다.

정리

• 클래스나 인터페이스에 타입 매개변수를 두면, 인스턴스나 쓰는 곳에서 정한 타입 하나가 모든 멤버에 함께 적용됩니다.
• 타입 인수를 적지 않으면 생성자의 인수에서 추론되며, 컴파일한 코드에는 타입 매개변수가 지워진 클래스 하나만 남습니다.
• 인터페이스의 호출 시그니처에 타입 매개변수를 쓰면, 입력과 출력의 타입을 쓰는 곳마다 정할 수 있는 함수 타입이 됩니다.
• 클래스의 타입 매개변수에 제약을 붙이면 그 모양을 갖춘 타입만 받으며, 맞지 않는 타입 인수는 TS2344로 진단됩니다.
• 타입 매개변수는 값의 타입만 정하므로, 복사와 비교, 중복 방지, 조회 실패의 처리는 구현이 따로 맡습니다.

연습 문제

1. 문자열 id를 더한 뒤의 조회

위의 실행에 이어 { id: "2", name: "유나", email: "[email protected]" }를 더했습니다. findById(2)?.name과 findById("2")?.name은 각각 무엇인가요? practiceRepository.findById(99).name을 바로 읽어도 되나요?

2. 상자에 다른 타입 넣기

const inferredBox = new Box("Hello"); 다음에 inferredBox.setValue(42);를 쓰면 어떻게 되나요? 숫자와 문자열을 모두 담는 상자가 필요하다면 어떻게 만들어야 하나요?

3. 복사해서 저장하기

IdentifiableRepository의 add를 this.items.push({ ...item });로 바꾸면, 위 실행의 세 출력 가운데 무엇이 달라지나요?

다음 글 조건부 타입과 제네릭에서는 5장의 조건부 타입을 제네릭과 함께 써서, 입력 타입에 따라 결과 타입이 달라지는 함수와 유틸리티를 만드는 방법을 다룹니다.