타입선언 - 인덱스 시그니처 , undefined 에러처리

🚨 문제 1

불러올 데이터의 타입 선언 작성 중 반복되는 부분에서 키(이름) 만 바뀌는 경우 일때 어떻게 작성을 해야하는지 고민이 되었다.

"Atrox" 는 롤 챔피언 이름으로 data 객체 안에 여러 챔피언들이 들어있고 key 인 "Atrox" 부분이 바뀌면서 다른챔피언 정보들이 들어있다.

{
  "type": "champion",
  "format": "standAloneComplex",
  "version": "14.19.1",
  "data": {
    "Aatrox": {
      "version": "14.19.1",
      "id": "Aatrox",
      "key": "266",
      "name": "Aatrox",
      "title": "the Darkin Blade",
      "blurb": "Once honored defenders of Shurima against the Void, Aatrox and his brethren would eventually become an even greater threat to Runeterra, and were defeated only by cunning mortal sorcery. But after centuries of imprisonment, Aatrox was the first to find...",
      "info": {
        "attack": 8,
        "defense": 4,
        "magic": 3,
        "difficulty": 4
      },
      "image": {
        "full": "Aatrox.png",
        "sprite": "champion0.png",
        "group": "champion",
        "x": 0,
        "y": 0,
        "w": 48,
        "h": 48
      },
      "tags": [
        "Fighter"
      ],
      "partype": "Blood Well",
      "stats": {
        "hp": 650,
        "hpperlevel": 114,
        "mp": 0,
        "mpperlevel": 0,
        "movespeed": 345,
        "armor": 38,
        "armorperlevel": 4.8,
        "spellblock": 32,
        "spellblockperlevel": 2.05,
        "attackrange": 175,
        "hpregen": 3,
        "hpregenperlevel": 0.5,
        "mpregen": 0,
        "mpregenperlevel": 0,
        "crit": 0,
        "critperlevel": 0,
        "attackdamage": 60,
        "attackdamageperlevel": 5,
        "attackspeedperlevel": 2.5,
        "attackspeed": 0.651
      }
    },

 

✅ 해결

"Atrox" 를 인덱스 시그니처 [key: string] 으로 작성하였다.

* 인덱스 시그니쳐(Index Signature)는 {[key : T] : U}형식으로 객체가 여러 Key를 가질 수 있으며 Key와 매칭되는 value를 가지는 경우 사용한다. (속성 이름 대신 대괄호 안에 key타입을 작성)

// Champions.ts
export interface Champion {
  type: string;
  format: string;
  version: string;
  data: {
    [key: string]: {
      version: string;
      id: string;
      key: string;
      name: string;
      title: string;
      blurb: string;
      info: {
        attack: number;
        defense: number;
        magic: number;
        difficulty: number;
      };
      image: {
        full: string;
        sprite: string;
        group: string;
        x: number;
        y: number;
        w: number;
        h: number;
      };
      tags: string[];
      partype: string;
      stats: {
        hp: number;
        hpperlevel: number;
        mp: number;
        mpperlevel: number;
        movespeed: number;
        armor: number;
        armorperlevel: number;
        spellblock: number;
        spellblockperlevel: number;
        attackrange: number;
        hpregen: number;
        hpregenperlevel: number;
        mpregen: number;
        mpregenperlevel: number;
        crit: number;
        critperlevel: number;
        attackdamage: number;
        attackdamageperlevel: number;
        attackspeedperlevel: number;
        attackspeed: number;
      };
    };
  };
}

---

🚨 문제 2

데이터 페칭하는 route handler 로직을 작성하는데 headers 부분에서 에러가 발생했다.

 

headers 에서 Content-Type은 string으로 인식하는데, 환경변수인 X-Riot-Token은 string | undefined 였기 때문이다.

 

✅ 해결 2-1

해당 값의 끝에 느낌표를 추가해 typescript 컴파일러가 해당 변수는 undefined 또는 null이 될 수 없음을 명시해주었다.

headers: {
   "Content-Type": "application/json",
   "X-Riot-Token": process.env.RIOT_API_KEY!,
}

 

참고

https://growth-msleeffice.tistory.com/89

 

✅ 해결 2-2

const RIOT_API_KEY = process.env.RIOT_API_KEY; 를 함수 바깥에 선언하여 RIOT_API_KEY가 없으면 에러를 내보내도록 처리해주었다. 오류처리 이후 fetch를 하여 정상적으로 데이터를 불러올 수 있게 되었다.

const RIOT_API_KEY = process.env.RIOT_API_KEY;

export async function GET(request: Request) {
  if (!RIOT_API_KEY) {
    throw new Error("API KEY 가 없습니다.!");
  }

  const res = await fetch(
    "https://kr.api.riotgames.com/lol/platform/v3/champion-rotations",
    {
      headers: {
        "Content-Type": "application/json",
        "X-Riot-Token": RIOT_API_KEY,
      },
    }