[TS] TypeScript 정리하기 (3) - 인터페이스

---

인터페이스(Interface)

 

오늘은 타입스크립트 Interface에 대해 알아보겠다

 

아마 나와 비슷한 수준의 주니어 프론트엔드 개발자라면 인터페이스 라는 단어를 거의 들어보지 못했을 것이다.

 

나는 그나마 싸피 프로젝트를 하면서 코틀린으로 안드로이드 앱 개발을 한 적이 있는데

 

그 때 레트로핏을 하면서 인터페이스를 사용해 본 적이 있다

 

타입스크립트의 인터페이스도 그것과 비슷한 느낌이다

 

타입스크립트의 인터페이스는 객체를 위주로 다루고 

객체의 껍데기 혹은 설계도로 이해하면 된다

객채의 타입의 틀을 만들어 주는거다

 

예시를 봐보자

// 인터페이스의 정의
interface Todo {
  id: number;
  content: string;
  completed: boolean;
}

// 변수 todo의 타입으로 Todo 인터페이스를 선언하였다.
let todo: Todo;

// 변수 todo는 Todo 인터페이스를 준수하여야 한다.
todo = { id: 1, content: 'typescript', completed: false };

인터페이스로 틀을 만들어 주고

타입을 선언하고

변수에 넣어주면 된다

 

 

---

선택적 프로퍼티(Optional Properties)

 

인터페이스 안에 정의되어 있는 속성을 항상 모두 다 사용해야 한다면 코드의 유연성이 떨어질 것이다.

그래서 우리는 선택적 프로퍼티를 통해 이 문제를 해결할 수 있다.

 

사용 방법은 콜론(:) 앞에 물음표(?)를 붙이면 이 속성은 옵션 속성이 된다.

interface CraftBeer {
  name: string;
  hope?: number; // hope 속성은 명시해도 되고 안해도 상관없다 (옵션)
}

function brewBeer(beer: CraftBeer) {
  console.log(beer.name);
}

let myBeer = { name: 'Saporo' }; // hope 속성을 명시 안함
brewBeer(myBeer); // Saporo : 문제없이 동작한다.

 

 

일단 인터페이스는 이정도 까지만 알아보고 

 

다음에 실제로 사용해 보면서 더 알아보자 !!

 

 

참고

https://poiemaweb.com/typescript-interface

https://inpa.tistory.com/entry/TS-%F0%9F%93%98-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4-%F0%9F%92%AF-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0

https://ko.vuejs.org/guide/typescript/composition-api.html