코딩애플 Typescript - object index signatures

object 자료에 타입을 미리 만들어 주고 싶은데 다음 경우들 같을때 index signatures를 사용하면 편리하다.
1. object 자료에 어떤 속성들이 들어올 수 있는지 아직 모르는 경우
2. 타입지정할 속성이 너무 많은 경우

즉 object 타입 지정을 한번에 가능하다는것이다.

원래대로라면 이런식으로 object가 있다면 interface를 하나 생성해서 사용할것이다.
그런데 이렇게 반복적으로 사용하는게 번거롭다면 index signatures문법을 사용하면 된다.

이렇게 설정하면 모든 string의 속성이라고 지정할수있다.물론 | 을 사용해서 여러 타입을 넣을수 있다.

만약 이런식으로 age는 number 타입을 설정하고 그 아래 모든 타입은 string이라고 설정하면 이런 에러가 발생한다. age또한 모든 타입에 포함되니까 에러가 발생하는것이다. 즉 indexsignature와 중복되는 속성이다. | 를 사용해 여러 타입을 지정하는 방식으로 해야한다.

만약 속성이름이 숫자인경우는? 즉 key값에 숫자를 집어넣어서 object를 만들수도있다. 꺼낼때도 [0] 해주면 된다.
생각해보면 array와 유사하다 js상에서는 object와 array는 별 다를게 없다.

속성이름이 숫자인경우 일때도 가능하다. key : number이라고 해주는게 더 정확하지만 key타입을 string이라고 지정해도 object에서 숫자로 넣어도 결국은 문자화가 되는것이다.

---

object안에 object 안에 object..가있는 이런 경우에는 어떻게 타입을 지정할까?

이런식으로 자동으로 number가 들어간다.

이런식으로 하면 되는데 중요한건 이 타입지정 문법을 더 간략하게 줄일수있다.

이렇게 recursive하게 타입을 만들수 있다. object를 중첩해서 만드는것이다. 하지만 이렇게 사용할 일은 많이 없다.

---

숙제1) 다음 자료의 타입을 지정해보십시오.

let obj = {
  model : 'k5',
  brand : 'kia',
  price : 6000,
  year : 2030,
  date : '6월',
  percent : '5%',
  dealer : '김차장',
}

귀찮으니까 한번에 지정하기 위해 index signature 이걸 써봅시다.

나의 답안

interface MM{
    [key:string]:string | number
}

let obsj :MM = {
    model : 'k5',
    brand : 'kia',
    price : 6000,
    year : 2030,
    date : '6월',
    percent : '5%',
    dealer : '김차장',
}

센세 답안

이러면 버그가 줄어드나
 

 

type Car = {
  [key :string] : number | string
}

let obj :Car = {
  model : 'k5',
  brand : 'kia',
  price : 6000,
  year : 2030,
  date : '6월',
  percent : '5%',
  dealer : '김차장',
}
유연한 타입지정이 가능하지만 엄격하지 않아서

버그를 잡아준다는 장점은 없어질 수 있습니다. 

 

숙제2) 다음 object 자료의 타입을 interface 써서 만들어보십시오.

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

object 안에 object 안에 object가 들어있습니다.

타입지정 해보도록 합시다. 물론 비슷한 object들이 더 중첩되어도 가능하게 recursive한 타입을 써보는건 어떨까요.

나의 답안

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

let objs :SsS = {
    'font-size' : 10,
    'secondary' : {
        'font-size' : 12,
        'third' : {
            'font-size' : 14
        }
    }
}

센세 답안

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

let obj = {
  'font-size' : 10,
  'secondary' : {
    'font-size' : 12,
    'third' : {
      'font-size' : 14
    }
  }
}
1. MyType을 만들었는데 여기 안엔 'font-size' 속성, 그리고 모든 문자 속성이 들어갈 수 있습니다.

2. 모든 문자 속성이 들어오면 number | MyType을 가져야한다고 타입지정해놨습니다.

그럼 이제 여러분들이 object 안에 object를 집어넣어도 MyType 타입과 비슷하게 생기면 통과시켜줍니다.