An index signature parameter type cannot be a literal type or a generic type

[Kim-DaHam]

Bug Report

개요

PortfolioItem.tsx 컴포넌트에서 사용할 디자인을 별도로 관리하던 중 발생한 문제입니다.

PortfolioItem은 포트폴리오 섹션(App, Web, Illustration...)에 따라 크기 비율이 다릅니다. 따라서 디자인 토큰처럼 별도 관리하려고 했습니다.

무슨 포트폴리오인지 구분하기 위해 props를 받게 되고, 그 props를 더 정확히 할 Section 타입을 정의했습니다.

type Section = 'Android/iOS' | 'Web' | 'Illustration' | 'Graphics' | 'Video';

그리고 스타일 객체를 위한 타입을 정의했습니다.

// src/types/style.ts

import { Section } from "./portfolio"

export type PortfolioItemSize = {
    [key: Section]: { // 에러 발생
        aspectRatio: string
    }
}

그리고 다음과 같은 에러가 발생했습니다.

An index signature parameter type cannot be a literal type or a generic type

인덱스 파라미터 타입은 리터럴일 수 없다고 합니다.

💻 Code

type Section = 'Android/iOS' | 'Web' | 'Illustration' | 'Graphics' | 'Video';

export type PortfolioItemSize = {
    [key: Section]: { // 에러 발생
        aspectRatio: string
    }
}

🙁 Actual behavior

인덱스 파라미터 타입은 리터럴일 수 없다.

🙂 Expected behavior

key 타입을 Section으로 정확하게 고정하고 싶습니다.

추가 사항

[Kim-DaHam]

해결 방법

아래 사이트에서 다양한 해결 방법을 찾았습니다.

🔗 참고 사이트

그 중에서도 union을 사용하지 않으면서 해결 가능한 방법을 선택했습니다.

// types/style.ts

export type PortfolioItemSize = {
    [key in Section]: { // 에러 해결
        aspectRatio: string
    }
}