본문 바로가기
Q&A해결2025년 4월 19일1분 읽기

TypeScript에서 union 타입 좁히기가 안 되는 케이스

풀
풀스택지훈
조회 845댓글 2

TypeScript에서 union 타입 좁히기가 안 되는 케이스 관련 타입 에러입니다.

아래 코드에서 TypeScript가 타입을 제대로 추론하지 못합니다:

function fetchData<T>(url: string): Promise<T> {
  return fetch(url).then(r => r.json())
}

const data = await fetchData('/api/users')
// data가 unknown 타입으로 추론됨

제네릭 T가 자동으로 추론되지 않는 이유가 뭔가요?

이전 글
Next.js API Route에서 CORS 에러 해결 방법
다음 글
Docker 빌드 시 npm install이 매번 다시 실행되는 문제 — layer 캐시

댓글 2

김김영삼1년 전

TypeScript는 런타임 응답에서 타입을 추론할 수 없습니다. 호출 시 명시적으로 타입을 지정해야 합니다:

// 방법 1: 호출 시 제네릭 지정
interface User { id: number; name: string; email: string }
const users = await fetchData<User[]>('/api/users')

// 방법 2: Zod로 런타임 검증 + 타입 추론
import { z } from 'zod'
const UserSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().email(),
})
type User = z.infer<typeof UserSchema>

const data = await fetch('/api/users').then(r => r.json())
const users = z.array(UserSchema).parse(data)  // 런타임 검증 + 타입 안전

Zod를 쓰면 런타임 검증과 타입 추론을 동시에 할 수 있어 가장 안전합니다.

풀풀스택지훈1년 전
덕분에 해결했습니다! 감사합니다 🙏
Ctrl+Enter로 등록