본 블로그 포스트에서는 TypeScript에서 제네릭(Generic) 인터페이스를 이용하여 데이터 변환 및 필터링 하는 방법에 대해 알아보겠습니다.

제네릭(Generic) 인터페이스란?

제네릭 인터페이스는 다양한 타입의 데이터를 처리하는 함수나 클래스를 정의할 때 사용됩니다. 이를 통해 코드의 유연성을 확보하고 재사용성을 높일 수 있습니다.

데이터 변환하기

제네릭 인터페이스를 이용하여 데이터 변환을 해보겠습니다.

다음은 제네릭 인터페이스를 사용하여 배열의 각 요소를 변환하는 예제 코드입니다.

interface Converter<T, U> {
  (item: T): U;
}

function convertArray<T, U>(arr: T[], converter: Converter<T, U>): U[] {
  return arr.map(converter);
}

const inputArray: number[] = [1, 2, 3, 4, 5];
const stringArray: string[] = convertArray(inputArray, String);
console.log(stringArray); // 출력: ['1', '2', '3', '4', '5']

위 코드에서 Converter 인터페이스는 T 타입의 데이터를 U 타입의 데이터로 변환하는 함수를 정의하고, convertArray 함수는 이를 활용하여 배열의 각 요소를 변환합니다.

데이터 필터링하기

이번에는 제네릭 인터페이스를 사용하여 데이터를 필터링하는 방법을 살펴보겠습니다.

interface Filter<T> {
  (item: T): boolean;
}

function filterArray<T>(arr: T[], filterFn: Filter<T>): T[] {
  return arr.filter(filterFn);
}

const numberArray: number[] = [1, 2, 3, 4, 5];
const evenNumbers: number[] = filterArray(numberArray, num => num % 2 === 0);
console.log(evenNumbers); // 출력: [2, 4]

위 코드에서 Filter 인터페이스는 T 타입의 데이터를 받아 boolean 값을 반환하는 함수를 정의하고, filterArray 함수는 이를 활용하여 배열을 필터링합니다.

마무리

이렇게 제네릭 인터페이스를 활용하여 데이터 변환 및 필터링을 할 수 있습니다. 제네릭을 적절히 활용하면 다양한 타입의 데이터를 처리하는 함수나 클래스를 더욱 유연하고 강력하게 만들 수 있습니다.

참고 문헌:

• TypeScript 공식 문서: https://www.typescriptlang.org/docs/
• MDN 웹 문서: https://developer.mozilla.org/ko/docs/Web/JavaScript

이상으로 제네릭 인터페이스를 이용한 데이터 변환 및 필터링에 대해 알아보았습니다. 감사합니다.