예제가 있는 TypeScript 제네릭

TypeScript 제네릭은 재사용 가능하고 유형이 안전한 구성 요소를 만들 수 있는 강력한 기능입니다. 제네릭은 강력한 유형 안전성을 유지하면서 다양한 유형으로 작동하는 클래스, 함수 및 인터페이스를 만드는 방법을 제공합니다. 이 문서에서는 제네릭을 소개하고 실제 예제를 통해 제네릭을 사용하는 방법을 보여줍니다.

제네릭 이해

제네릭을 사용하면 작동하는 유형에 대한 플레이스홀더로 구성 요소를 정의할 수 있습니다. 구체적인 유형을 지정하는 대신 구성 요소를 사용할 때 모든 유형으로 대체할 수 있는 제네릭 유형 매개변수를 사용합니다.

기본 구문

제네릭 유형을 정의하는 기본 구문은 유형 매개변수 이름과 함께 꺾쇠괄호 <>를 사용하는 것입니다. 간단한 예는 다음과 같습니다.

function identity(value: T): T {
  return value;
}

const stringIdentity = identity("Hello"); // string
const numberIdentity = identity(123); // number

이 예에서 identity은 T 유형의 매개변수 value을 취하고 동일한 유형의 값을 반환하는 일반 함수입니다. 유형 매개변수 T은 함수가 호출될 때 실제 유형으로 대체됩니다.

클래스가 있는 제네릭

제네릭은 클래스와 함께 사용하여 유연하고 재사용 가능한 데이터 구조를 만들 수도 있습니다. 제네릭 클래스의 예는 다음과 같습니다.

class Box {
  private value: T;

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

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

const stringBox = new Box("TypeScript");
console.log(stringBox.getValue()); // Output: TypeScript

const numberBox = new Box(42);
console.log(numberBox.getValue()); // Output: 42

이 예에서 Box 클래스는 제네릭 형식 매개변수 T로 정의됩니다. 이 클래스에는 T 형식의 개인 속성 value과 T 형식의 값을 반환하는 메서드 getValue이 있습니다.

인터페이스가 있는 제네릭

제네릭은 인터페이스와 함께 사용하여 유연하고 유형이 안전한 인터페이스를 만들 수 있습니다. 다음은 예입니다.

interface Pair<T, U> {
  first: T;
  second: U;
}

const pair: Pair<string, number> = {
  first: "Age",
  second: 30
};

console.log(pair.first); // Output: Age
console.log(pair.second); // Output: 30

이 예에서 Pair 인터페이스는 두 개의 일반 유형 매개변수 T 및 U로 정의됩니다. 인터페이스는 각각 T 및 U 유형을 갖는 값 쌍을 나타냅니다.

함수의 제네릭

제네릭은 함수에서 여러 유형을 처리하면서 유형 안전성을 유지하는 데 사용할 수 있습니다. 배열과 함께 작동하는 제네릭 함수의 예는 다음과 같습니다.

function reverseArray(items: T[]): T[] {
  return items.reverse();
}

const reversedStringArray = reverseArray(["one", "two", "three"]);
console.log(reversedStringArray); // Output: ["three", "two", "one"]

const reversedNumberArray = reverseArray([1, 2, 3]);
console.log(reversedNumberArray); // Output: [3, 2, 1]

이 예에서 reverseArray 함수는 T 유형의 배열을 가져와 동일한 유형의 역 배열을 반환합니다. 유형 매개변수 T는 함수가 유형 안전성을 유지하면서 모든 유형의 배열에서 작동하도록 보장합니다.

제네릭에 대한 제약

때로는 특정 속성을 갖도록 제네릭 형식 매개변수에 제약 조건을 부과해야 할 수도 있습니다. 이는 제약 조건을 사용하여 수행됩니다.

function logLength(item: T): void {
  console.log(item.length);
}

logLength("Hello, TypeScript"); // Output: 16
logLength([1, 2, 3]); // Output: 3
// logLength(123); // Error: number does not have a length property

이 예에서 logLength 함수는 length 속성이 있는 유형으로 제한됩니다. 이를 통해 함수는 문자열과 배열을 허용하지만 숫자나 length 속성이 없는 다른 유형은 허용하지 않습니다.

결론

TypeScript의 제네릭은 강력한 유형 안전성을 유지하면서 유연하고 재사용 가능한 구성 요소를 만드는 강력한 방법을 제공합니다. 제네릭을 이해하고 활용하면 더 일반적이고 적응 가능한 코드를 작성하여 TypeScript 애플리케이션의 전반적인 품질과 유지 관리성을 개선할 수 있습니다.

프로젝트에서 제네릭을 실험하여 실제로 제네릭의 이점을 확인하고 TypeScript 프로그래밍 기술을 향상시키세요.