TS7053 오류

translations.ts TS7053 오류

🗓️ 이슈 발생일

2025-07-01

🧭 관련 파일

• src/lib/translations.ts

---

🧨 오류 요약

TS7053: Element implicitly has an 'any' type because expression of type 'any' can't be used to index type ...

• TRANSLATIONS[language][category][key] 접근 시 TypeScript가 key의 타입을 유추하지 못해 any 타입 경고 발생.
• category는 'errors' | 'ui', key는 ErrorKey | UIKey로 지정되어 있으나, TypeScript는 category와 key가 서로 연관된 타입이라는 것을 알지 못함.

---

🔍 원인 분석

• category가 'errors'일 때만 ErrorKey를 사용해야 하고, 'ui'일 때는 UIKey를 사용해야 함.
• 그러나 함수 시그니처에서는 이 관계를 명시적으로 연결하지 않아 TypeScript가 key의 타입을 명확히 추론할 수 없었음.
• 그 결과, key as any로 인덱싱하는 기존 방식이 TS7053 오류를 유발함.

---

✅ 해결 방법

1. 제네릭 타입 도입

export function t<T extends 'errors' | 'ui'>(
  category: T,
  key: T extends 'errors' ? ErrorKey : UIKey,
  language: Language = 'ko'
): string

• 제네릭을 통해 category와 key의 타입을 조건부로 연결함.
• 'errors'면 ErrorKey, 'ui'면 UIKey로 key 타입을 자동 제한.

2. 타입 안정성을 확보한 인덱싱

const translation = TRANSLATIONS[language]?.[category];
const fallback = TRANSLATIONS.ko[category];

if (category === 'errors') {
  return (translation as any)?.[key] || (fallback as any)[key];
} else {
  return (translation as any)?.[key] || (fallback as any)[key];
}

• translation과 fallback을 별도로 분리하여 처리.
• as any를 최소화하고, 논리적으로 category를 나눈 후 타입 강제 적용.

---

🧪 검증 결과

작업	결과
npx tsc --noEmit	✅ TypeScript 오류 없음
npm run build	✅ 빌드 성공 (일부 콘솔 경고 존재하나 문제 없음)

---

📌 회고 및 정리

• 타입스크립트의 조건부 타입(Conditional Type)을 활용해 분기 구조와 key 타입을 정적으로 안전하게 연결할 수 있음.
• 불가피한 as any 사용은 최소화하며, 코드 전체의 타입 안정성을 높이는 방향으로 개선함.