A = [{ a:string, b:string}]와 type B = { a:string, b:string}[]의 차이가 뭘까요?

하루가 질문했던 내용에 당일 해답을 주지 못해서 다음날 고민해보다가 해결한 기록입니다
글도 남길 겸, 타입스크립트 스터디와 재이에게 정보도 줄 겸! 이렇게 블로그를 작성했습니다 😉👍 멋진 팀원이죠?

 

얼른 본론으로 들어갈게요

 

문제가 뭐였나요?

하루가 질문한 내용은,
상위 컴포넌트에서

type A = [{
  a:string,
  b:string
}]

type B = {
  a:string,
  b:string
}[]

A 타입으로 작성된 props를 받을 때, type을 B로 명시하면 발생하는 에러에 관한 것이었습니다.
배열의 크기는 항상 1로 일정하고, 똑같이 배열 안에 a, b string이 들어있는 객체를 보내는 것은 똑같은데, 이 타입이 무슨 차이가 있어서 달라질까요?
하는 내용이었습니다.

 

 

그래서 무슨 차이가 있나요?

const case1 = [{
  a:'주현',
  b:'주현주현'
}] 

이 case1의 타입은 뭘까요?

바로

const case1: {
    a: string;
    b: string;
}[]

입니다.
case1 처럼 생긴 타입은 {a:string, b:string}[] 이렇게 반환되는 것 같다고 유추해 볼 수 있습니다.

 

음~ 그럼 타입을 한번 작성해볼까요?

type A = [{
  a:string,
  b:string
}]

type B = {
  a:string,
  b:string
}[]

type C = {
  a:string,
  b:string
}
type D = Array<C>

타입 네개를 작성해보았습니다
type A는 보이는대로 배열 안에 {a:string, b:string}이 들어있는 타입입니다
type B는 {a:string, b:string}이 몇 개든 들어갈 수 있는 배열 타입입니다
type C는 그냥 {a:string, b:string} 객체를 명시한 타입이고
type D는 C type만을 받는 배열입니다.

 

 

type-challenges에서 자주 써먹던 Equal을 사용해 타입을 비교해 보았습니다

  Expect<Equal<A,B>> // ERROR 🚨
  Expect<Equal<D,B>> 

type A와 B는 확실히 다른 타입입니다.
D와 B는 배열 안에 {a:string, b:string}가 얼마든지 들어갈 수 있다는 점에서 같은 타입이지만,
type A는 배열 안에 객체가 단 하나만! 들어있습니다

 

 

  Expect<Equal<typeof case1,A>> // ERROR 🚨 
  Expect<Equal<typeof case1,B>>
  Expect<Equal<typeof case1,D>>

case1의 type이 B와 D와 같았기 때문에 당연히 typeof case 1과 A type을 비교할때는 에러가 발생하겠죠?

 

 

여기서 재미있는 부분은

const case2:A = [{
  a:'주현',
  b:'주현주현'
}] 

case2(type추론으로는 type B(D)가 되는)의 타입을 A로 명시해줄 때에 있어요

  Expect<Equal<typeof case2,A>>
  Expect<Equal<case2,B>> // ERROR 🚨
  Expect<Equal<case2,D>> // ERROR 🚨

짜자잔
typeof case2는 이제 [{a:string, b:string}]가 되기 때문에
typeof case2와 A는 타입이 일치하고 B, D와는 불일치하게 됩니다(당연하죠..?)

결론

제 생각으로는,
😎 너는 꼭 [{a:string}]이라고 생긴 타입이야! 이 배열 안에 다른게 들어갈 수 없어! 똑같은 {a:string}이더라도!
라고 제어하는 것과
😎 너는 {a:string}[] 인 타입이야! {a:string}이라고 생긴 애들만 배열에 넣을 수 있어!

라는 타입의 차이인 것 같아요

작성하고 보니 너무 당연한 내용이네요

..

그래도 열심히 썼으니 올리겠습니다

누군가에게는 필요한 내용이 되길!

 

링크에서 더 실험해 보실 수 있을거에요! 설명도 들어있답니다