복슬이
1k
2021-03-01 17:03:36
1
215

Typescript에서 object 객체 iteration하는 방법


const objectValue = {
  a: "abc",
  b: 123,
  c: true,
};

for (const key of Object.keys(objectValue)) {
  const value = objectValue[key];
  console.log("value :>> ", value);
}


objectValue 값 iteration하는 방법이 어떻게 하면 될까요?

위 코드처럼 하면 

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ a: string; b: number; c: boolean; }'.

  No index signature with a parameter of type 'string' was found on type '{ a: string; b: number; c: boolean; }'.

이렇게 컴파일 에러 납니다.


간단해 보여서 구글링 했는데 못 찾겠네요 ㅡㅡ;


0
  • 답변 1

  • Frudy
    7k
    2021-03-01 17:56:42
    for (const key of Object.keys(objectValue) as (keyof typeof objectValue)[]) {
    const value = objectValue[key];
    console.log("value :>> ", value);
    }


    저라면 이렇게 하겠습니다.


    먼저, 제가 설정한 타입스크립트에서는

    Object.keys의 타입이 keys(o: {}): string[];

    이렇게 정의되어있었습니다.


    그래서

    for (const key of Object.keys(objectValue)) {

    이 경우에 key의 type은 string으로 추론되게됩니다.

    const value = objectValue[key];

    그래서 여기서 타입애러가 발생할 수 밖에 없습니다.


    objectValue라는 객체에 존재하는 property는 'a' 'b' 'c' 3개밖에 없는데

    string이라는 타입의 이름으로 객체에 접근하려고 했으니까요.


    혹시 이게 어떤뜻인지 모르실 수도 있다고 생각해서 추가로 설명적어드리면요,


    'unknown' << 이것도 엄연히 문자열인대요,

    for (const key of Object.keys(objectValue)) {
    const value = objectValue[key];
    console.log("value :>> ", value);
    }

    objectValue.unknown = 3;

    이런 코드 적어보실래요? 아마 unknown이라는 key 없다고 에러날거에요.


    그러므로, 위에서 겪으신 에러를 타입에러를 해결하려면,

    for (const key of Object.keys(objectValue)) {

    여기서 key의 타입이 string이 아닌, 'a' 'b' 'c' 딱 3개중에 하나다 라고 명시를 해야해요.

    그러면 타입에러는 발생하지않습니다.


    그래서 여기서부터는 다양한 방법이 존재합니다.

    for (const key of Object.keys(objectValue) as ('a' | 'b' | 'c')[]) {
    const value = objectValue[key];
    console.log("value :>> ", value);
    }

    이렇게 Object.keys()의 반환타입을 건드려도 좋구요, (이 경우 key의 타입은 'a' 'b' 'c'중 하나라고 추론됨)


    for (const key of Object.keys(objectValue)) {
    const value = objectValue[key as 'a' | 'b' | 'c'];
    console.log("value :>> ", value);
    }

    이렇게 하셔도 효과는 동일합니다.

  • 로그인을 하시면 답변을 등록할 수 있습니다.