Typescript

inteface에 대해 설명하기 전에 대충 알아보고 가자.

진짜 자바스크립트랑 거의 같다.
다른 점은 정적 타입을 명시할 수 있다는거?

그것 말곤 없다 ㅋㅋ

암튼 그래서 타입을 지정해둬주니까.
변수나 함수의 목적을 명확하게 전달이 가능한거죠.

그래서 해당 타입이 아닌 값을 넣으면 에러가 나온다!

type 명시

• JS

const a = 3;
const b = '5';
console.log(a*b); 

-> 15 출력

타입 지정이 안되서 발생하는 오류죠?

• TS

const a:number = 3;
const b:string = '5';
console.log(a*b); 

-> error

타입 지정을 해줘서 에러 발생하죠?

이렇게 TS에서는 타입을 지정해줘서 에러 방지 해줌.

---

interface

인터페이스란?

같은 모양의 타입들의 이름을 정해주는거라고 생각하면 됨.

구조체에서 typedef로 이름 정해주잖아?
그런 느낌임.

사용법

interface anime {
	name: string,
    year: number,
    isAdult: boolen
}

anime 인터페이스를 하나 만들어 줬다.

이것은 name, year, isAdult 라는 속성을 가지고 있는데,
해당 속성들의 타입들을 미리 정해준거임.

위 인터페이스를 이용해 변수를 만들어 본다면

let Jojo: anime = {
	name: "JoJo's Bizarre Adventure",
    year: 2012,
    isAdult: true
}

위와 같이 만들어줄 수 있겠네요.

활용

인터페이스는 변수 선언에만 사용가능 한 것이 아님.

변수의 매개변수, map, class 등등.
해당 데이터를 사용하는 곳 어느곳에서든 사용이 가능함

---

타입속 타입 적용

나한테는 map에서 필요했다.

<Flex>
  {playListResult?.map((track: Track) => (
     <Box key={track.id} p={5}>
       <img src={track.images[0].url} alt="Album Cover" />
       <div>{track.name}</div>
       <div>{track.artists[0].name}</div>
      </Box>
  ))}
</Flex>

위 코드에서 playListResult라는 data에 대해 map을 해줬다.

map 되는 데이터의 타입을 Track이라는 interface를 적용해준 모습이죠.

그럼 Track interface를 봅시다.

interface Track {
  id: number;
  name: string;
  artists: {name:string};
  images: {url:string}[];
}

위와 같이 interface를 적용해줬는데,
처음보는 형식이 있죠?

artists: {name:string};

이것은 artists 타입의 name 타입에 string을 적용한다는 말이여.
말로 이해하기는 어려운데,

API를 받으면서 이런 경우가 발생했거든요.

위처럼 artists 배열 속, name 데이터를 가져와야했음.
그래서 artists[0].name 이라고 데이터를 가져오니까

name의 type을 지정안해줬다고 오류가 뜨더라고.

그런 경우에 위와 같이 적용해주면 타입 적용이 아주 환상적으로 됨.

---

마무리

이상으로 인터페이스 공부는 여기까지 가볍게 해보도록 하겠어요.

뭐 인터페이스 중첩 적용 그런것도 되는것 같은데
웬만하면 구조체랑 구조가 거의 비슷한 것 같음.

위와 같은 특이상황이 생겨서 글을 작성해봤읍니다.