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

안녕하세요, 코드아키텍트입니다.

오늘은 Vite와 TypeScript를 함께 사용할 때 발생할 수 있는 에러와 그 해결법에 대해 이야기해보려 합니다.

 

 

왜 Vite에서 TypeScript 에러를 해결해야 할까?

 

이유는 간단합니다. Vite 앱을 배포(build)하기 위해서입니다.

제 경험상, Vite는 빌드 시에 TypeScript 에러가 있으면 중단됩니다. 자바스크립트와는 달리 TypeScript는 타입을 엄격하게 검사하기 때문에, 타입이 맞지 않으면 오류가 발생합니다.

특히 기존에 자바스크립트를 쓰던 분들에게는 생소하고 번거롭게 느껴질 수도 있지만, 타입 안정성은 유지보수에 큰 도움이 되기 때문에 익숙해질수록 장점이 많습니다.

이 글에서는 너무 깊게 들어가진 않고, “배포하려면 꼭 해결해야 한다”는 정도로만 정리하겠습니다.

 

 

에러의 원인: JSON의 키는 string이어야 한다

 

TypeScript에서 다음과 같은 코드를 작성하면 에러가 발생할 수 있습니다:

const example = {
  1: "hello",
  2: "world"
}

 

표면적으로는 숫자처럼 보이지만, 사실 JSON에서 키는 항상 문자열(string)로 처리됩니다.

자세한 설명은 MDN의 아래 링크에서 확인하실 수 있습니다:

🔗 MDN - Property Accessors

 

그래서 1, 2 같이 숫자로 작성된 키도 내부적으로는 "1", "2"와 같은 문자열로 변환됩니다.

TypeScript는 이를 엄격하게 보기 때문에, 객체 타입을 잘못 지정하면 에러가 발생하는 것이죠.

 

해결 방법: Record 타입을 활용한 명시적 타입 지정

 

TypeScript에는 유용한 **유틸리티 타입(Utility Types)**이 있습니다. 그중에서도 Record<K, T>는

Key와 Value의 타입을 명확히 지정할 수 있는 가장 기본적인 형태입니다.

🔗 TypeScript - Record Utility Type

아래는 Record<number, Type> 형태를 활용하여 타입을 지정한 예시입니다:

export const Works: Record<number, {
  title: string;
  body: string;
  animation: (scene: Scene) => void;
}> = {
  1: {
    title: "Hello World",
    body: "This is the new world",
    animation: rotateBox
  },
  2: {
    title: "My next World",
    body: "Card is making a world",
    animation: drawLines
  }
}

위 코드에서 Works 객체는 number 타입의 키를 가지며, 각 값은 지정된 형태의 객체를 따릅니다.

이처럼 Record를 사용하면 TypeScript의 엄격한 타입 검사에서도 문제가 발생하지 않게 됩니다.

 

마무리하며

오늘은 Typescript에서 발생하는 문제를 해결해보았습니다.

javascript는 손가는대로 막하는 맛이 있다면 typescript는 좀더 구조화된 프로그래밍을 하는 느낌이 있습니다. 개인마다 두 언어에대한 선호도가 다르고, 각기 장단점도 명확합니다. typescript를 계속 쓴다면 javascript에서는 없던 위와같은 이슈들을 계속 해결해나가야 합니다.

IDE에서 자동완성의 손맛을 느끼고 싶으신 분들은 위와같은 방법으로 typescript로 작성하시면 되고, 그렇지않다면 javascript를 쓰길 추천드립니다.

※ 위 글은 제가 초안을 작성하고 ChatGPT를 통해 다시 다듬은 글입니다.

https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype

Documentation - Utility Types

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors#property_names

Property accessors - JavaScript | MDN