타입스크립트) 배열 안 원소로 객체가 있을 경우 타입 선언

0. 글을 쓴 계기

- 오픈마켓 프로젝트를 하던 중, 아래와 같이 객체를 원소로 가지고 있는 배열을 타입 지정할 일이 생겼다.

저 OPTIONS 상수를 SelectPhoneBox 에 props로 내려줘야해서 props 에 타입을 지정해야하는 일이 생겼다. 

 

interface 로 객체타입 지정은 많이 해봤는데 배열안에 객체라...

InputPhone 컴포넌트

 

 

1. 배열 안 객체 타입 지정 방법 - interface 로 선언하는 방법

 

1단계 : {value:'010' , name : '010'} 의 객체만 나타낼 수 있는 interface를 생성한다.

2단계 : OPTIONS 전체를 나타낼 수있는 interface를 생성하고  ObjectProps 를 불러와서 뒤에 [] 배열 표시를 해준다. 

3단계 : props 옆에 붙여주면 된다.

2. 배열 안 객체 타입 지정 방법 - 기본 타입 지정

객체 표시를 앞에 두고, 배열표시를 뒤에 한다.

{options:{value:string name:string}[]}

 

참고자료

https://velog.io/@rkio/Typescript-%EB%B0%B0%EC%97%B4%EC%9D%98-%EC%9B%90%EC%86%8C%EB%A1%9C-%EA%B0%9D%EC%B2%B4%EA%B0%80-%EC%9E%88%EC%9D%84-%EB%95%8C-%ED%83%80%EC%9E%85-%EC%84%A0%EC%96%B8