정중식의 개발공부로그

object index signatures

26 Apr 2023 | typeScript

코딩애플강의를 보고 정리했습니다.

signatures는 다음과 같은 상황에서 유용하다.

  • object 자료에 타입을 미리 만들어주려고 하지만, object 자료에 어떤 속성들이 들어올 수 있는지 아직 모르는 상태
  • 타입지정할 속성이 너무 많을때

등등..

예시

index signatures

interface StringOnly {
  [key: string]: string;
}

let obj: StringOnly = {
  name: 'kim',
  age: '20',
  location: 'seoul',
};

` [key: string]: string;` 이부분을 주의깊게 살펴봐야한다.

  • {모든속성:string} 이라는 뜻이다.
  • []대괄호에는 string,number 둘 중 하나의 유형만 가능하다.
interface StringOnly {
  age: number; ///에러남
  [key: string]: string;
}

interface StringOnly {
  age: string; ///가능
  [key: string]: string;
}

[] 이 문법은 다른 속성과 함께 사용할 수 있지만,
{ 모든 속성 : string, age : number } 이건 뭔가 논리적으로 말이 되지 않아 에러를 낸다.
하지만 아래처럼 하면 가능하다.

interface StringOnly {
  age: number; ///가능
  [key: string]: string | number;
}

array형태도 가능하다.

interface StringOnly {
  [key: number]: string,
}

let obj :StringOnly = {
  0 : 'kim'
  1 : '20',
  2 : 'seoul'
}

위의 타입 코드는 { 모든숫자속성 : string } 이라는 뜻이다.
하지만, 숫자 key만 넣을거면 그냥 array + tuple 타입 쓰는게 더 직관적일 수 있다.

Recursive Index Signatures

만약 다음과 같이 오브젝트 안에 또 오브젝트가 있다고 가정해보자

let obj = {
  'font-size': {
    'font-size': {
      'font-size': 14,
    },
  },
};

이렇게 중첩된 오브젝트들을 한번에 타입 지정할때 어떻게해야 할까?

interface MyType {
  'font-size': {
    'font-size': {
      'font-size': number,
    },
  };
}

직접 interface 안에 ‘{}’ 이걸 3번 중첩되게 만들어도 상관없겠지만, 이런식으로도 타입 지정을 할 수 있다.

interface MyType {
  'font-size': MyType | number;
}

let obj: MyType = {
  'font-size': {
    'font-size': {
      'font-size': 14,
    },
  },
};

MyType이라는 타입을 만들었는데, ‘font-sze’속성은 MyType과 똑같이 생겼다고 타입을 만들어 준것이다.

Ex)

interface MyType {
  'font-size': number;
  [key: string]: number | MyType;
}

let obj = {
  'font-size': 10,
  secondary: {
    'font-size': 12,
    third: {
      'font-size': 14,
    },
  },
};

Related Posts