제네릭(Generics) 1부 - "타입의 파라미터화

async function fetchJson(url) {
  const res = await fetch(url);
  return res.json();
}
 
const profile = await fetchJson("/me");
console.log(profile.name); // undefined면 런타임 에러

async function fetchJson<T>(url: string): Promise<T> {
  const res = await fetch(url);
  return res.json() as T; // 런타임에서는 여전히 any지만 컴파일 타임에는 T로 다뤄짐
}
 
const profile = await fetchJson<{ name: string; id: number }>("/me");
console.log(profile.name); // string 타입으로 안전하게 접근
console.log(profile.id); // number 타입으로 안전하게 접근

function identity<T>(value: T): T {
  return value;
}
 
const text = identity("hello"); // T는 string으로 추론됨
const count = identity(42); // T는 number로 추론됨
const user = identity({ id: 1 }); // T는 { id: number }로 추론됨

interface User {
  name: string;
  id: number;
}
 
// 자동 추론
const user1 = identity({ name: "김개발", id: 1 }); // User 타입으로 추론
 
// 명시적 지정
const user2 = identity<User>({ name: "김개발", id: 1 }); // 명시적으로 User 타입 지정
 
// API 호출에서 명시적 지정이 유용
const me = await fetchJson<User>("/me"); // 반환 타입을 명시적으로 지정

function withId<T extends { id: string }>(value: T) {
  console.log(value.id); // id가 보장되어 있으므로 안전
  return value;
}

// 함수의 반환 타입 추출
async function fetchJson<T>(url: string): Promise<T> {
  const res = await fetch(url);
  return res.json();
}
 
type User = { id: number; name: string };
 
// 1) 함수의 반환 타입 추출
// typeof fetchJson<User>는 함수 타입 fetchJson<User>을 의미
// ReturnType<...>는 이 함수의 반환 타입인 Promise<User>를 추출
type UserResponse = ReturnType<typeof fetchJson<User>>; // Promise<User>
 
// 2) 함수의 파라미터 타입 추출
// Parameters<typeof fetchJson>은 [url: string] 튜플 타입
// [0] 인덱스로 첫 번째 파라미터 타입인 string을 추출
type FetchParams = Parameters<typeof fetchJson>[0]; // string (url 파라미터)
 
// 3) 제네릭 함수의 파라미터 타입 추출
function createApi<T>() {
  return {
    get: (id: string) => fetchJson<T>(`/api/${id}`), // 단일 항목 조회
    list: () => fetchJson<T[]>(`/api`), // 목록 조회 (배열)
  };
}
 
// 단계별 분석:
// typeof createApi<User> → createApi<User> 함수 타입
// ReturnType<...> → { get: (id: string) => Promise<User>, list: () => Promise<User[]> }
// ["get"] → (id: string) => Promise<User> 함수 타입
// Parameters<...> → [id: string] 튜플 타입
// [0] → 첫 번째 파라미터 string 타입
type ApiParams = Parameters<ReturnType<typeof createApi<User>>["get"]>[0]; // string

// 1) API 응답 상태를 표현하는 제네릭 타입
// T는 API에서 반환할 데이터의 타입을 나타냄
type UseDataResult<T> = {
  data: T | null; // API 데이터 (성공 시 T 타입, 초기/에러 시 null)
  loading: boolean; // 로딩 상태
  error: Error | null; // 에러 객체 (없으면 null)
};
 
// 2) 제네릭 커스텀 훅: URL에 따라 다른 타입의 데이터를 fetch
// T는 이 훅을 사용할 때 지정할 데이터 타입
function useData<T>(url: string): UseDataResult<T> {
  // 제네릭 타입 T를 사용해 state 타입을 지정
  // 초기 상태: 로딩 중, 데이터와 에러는 없음
  const [state, setState] = useState<UseDataResult<T>>({
    data: null, // 아직 데이터 없음
    loading: true, // API 호출 시작하므로 로딩 중
    error: null, // 에러 없음
  });
 
  // URL이 변경될 때마다 API 호출
  useEffect(() => {
    // fetchJson<T>에 T 타입을 전달하여 해당 타입의 데이터를 기대
    fetchJson<T>(url)
      .then((data: T) => {
        // 성공: 데이터 저장, 로딩 종료, 에러 초기화
        setState({ data, loading: false, error: null });
      })
      .catch((error: Error) => {
        // 실패: 데이터 초기화, 로딩 종료, 에러 저장
        setState({ data: null, loading: false, error });
      });
  }, [url]); // url이 바뀔 때마다 재실행
 
  // 현재 상태 반환 (호출하는 컴포넌트에서 사용)
  return state;
}
 
// 3) 실제 컴포넌트에서 사용 예시
function ProductList() {
  // useData<Product[]>로 호출: Product 배열 타입의 데이터를 기대
  // TypeScript는 data가 Product[] | null임을 추론
  const { data, loading, error } = useData<Product[]>("/products");
 
  // 로딩 중이면 스피너 표시
  if (loading) {
    return <Spinner />;
  }
 
  // 에러가 있거나 데이터가 없으면 에러 패널 표시
  if (error || !data) {
    return <ErrorPanel error={error} />;
  }
 
  // 데이터가 있으면 (Product[] 타입) 목록 렌더링
  // TypeScript는 data가 Product[]임을 보장
  return <List items={data} />;
}