TypeScript는 JavaScript에 타입 시스템을 추가한 언어로, 제네릭을 활용하여 코드를 작성할 때 타입 안정성을 유지하는 것이 가능합니다. 때때로 비동기 처리를 위해 Promise나 콜백 함수를 사용해야 할 때, 제네릭을 사용하여 다양한 타입의 데이터를 처리할 수 있습니다.

이번 포스트에서는 TypeScript의 제네릭 인터페이스를 활용하여 다양한 비동기 처리 방법에 대해 알아보겠습니다.

제네릭 인터페이스란?

제네릭 인터페이스는 인터페이스 정의 시 타입을 파라미터화하여 다양한 타입을 한꺼번에 지원할 수 있는 기능입니다.

아래는 Promise를 사용한 제네릭 인터페이스의 예시입니다.

interface ApiResponse<T> {
  data: T;
  status: number;
}

function fetchData<T>(url: string): Promise<ApiResponse<T>> {
  return fetch(url)
    .then(response => {
      return response.json() as Promise<T>;
    })
    .then(data => {
      return { data, status: 200 };
    })
    .catch(error => {
      return { data: error, status: 500 };
    });
}

위 코드에서 ApiResponse<T>는 제네릭 타입 T를 사용하여 서버로부터 받아온 데이터의 타입을 명시합니다. fetchData 함수는 입력된 URL로부터 데이터를 가져와 ApiResponse 형태로 반환하는 함수입니다.

Promise를 사용한 예시

제네릭을 사용하여 Promise를 다룰 수 있습니다.

interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

fetchData<Post>('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    console.log(response.data);
  });

위의 예시에서 fetchData 함수를 호출할 때 제네릭으로 Post 타입을 명시함으로써, ApiResponse의 data 속성이 Post 형태의 데이터를 반환함을 보장받을 수 있습니다.

콜백 함수를 사용한 예시

콜백 함수에서도 제네릭을 활용할 수 있습니다.

function getUsers<T>(callback: (data: T[]) => void) {
  // 비동기 작업 후
  callback([ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' } ]);
}

getUsers<{ id: number, name: string }>(users => {
  users.forEach(user => {
    console.log(user.name);
  });
});

위의 코드에서 getUsers 함수 호출 시 제네릭으로 T를 명시하여, 콜백 함수가 받는 데이터의 타입을 명시했습니다.

결론

제네릭 인터페이스를 활용하여 비동기 처리 방법을 다양한 타입에 대해 보다 안정적이고 유연하게 다룰 수 있습니다. 이를 통해 코드의 가독성을 높이고, 타입 안정성을 유지하면서 비동기 처리를 보다 효율적으로 다룰 수 있습니다.