타입지정 오류, 필요한 타입만 사용

롤 챔피언의 세부정보를 가져오는 server action 함수를 작성한 후 페이지에서 불러와 사용하는데 타입지정 중에 오류가 발생했다.

 

발생한오류

이전에는 불러올 데이터 중 필요없는 부분까지 타입을 연습 겸 전부 적어줬었는데 해당 타입을 지정해주었을 때 계속 오류가 떴다.

 

 

이전에 선언한 타입

타입선언을 조금 잘못적어준 것 같은데 fetch한 data와 계속 여러번 비교하면서 확인했는데도 어느 부분이 잘못되었는지 못찾았고 계속 헤맸다.

export type ChampionDetail = {
  [key: string]: {
    id: string;
    key: string;
    name: string;
    title: string;
    image: {
      full: string;
      sprite: string;
      group: string;
      x: number;
      y: number;
      w: number;
      h: number;
    };
    skins: [];
    lore: string;
    blurb: string;
    allytips: string[];
    enemytips: string[];
    tags: string[];
    partype: string;
    info: {
      attack: number;
      defense: number;
      magic: number;
      difficulty: number;
    };
    stats: object;
    spells: [];
    passive: {
      name: string;
      description: string;
      image: [];
    };
    recommended: [];
  };
};

 

 

해결방법

필요한 데이터 타입만 명시하고 필요없는 데이터는 [key: string]: any; 로 전부 들어오도록 수정해주었더니 더이상 타입오류가 발생하지 않았다.

export type ChampionDetail = {
  [key: string]: {
    id: string;
    key: string;
    name: string;
    title: string;
    image: {
      full: string;
      sprite: string;
      group: string;
      x: number;
      y: number;
      w: number;
      h: number;
    };
    blurb: string;
    [key: string]: any;
  };
};