서로를 연결하는 너란녀석.._TS

김명성·2021년 9월 3일
3

TS

목록 보기
2/2
post-thumbnail

🙋🏻‍♂️ TypeScript

오늘은 사전적의미로는 '사람과 컴퓨터를 연결하는 장치'라고 하는
Interface에 대해 알아보는 시간을 갖겠습니다.

🙋🏻‍♂️ Interface 사용법

Interface는 이런식으로 객체 형태로 변수의 타입을 정해줄 수 있습니다.
언뜻 보면 전에 봤었던 type과 비슷한 모습을 보이기도 하네요.

자주 정해줘야 하는 타입의 무리를 이렇게 Interface로 지정해서 정해준다면
언제든 필요한 곳에 해당 Interface를 불러올 수 있겠습니다.

저번 시간에 Interface& 연산자로 엮을 수 있다고 했는데
이런 식으로 서로 다른 키와 타입을 갖고 있는 Interface 엮어줄 수 있습니다.

Interface& 연산자로 엮을 수 있지만 엮어야 하는 종류가 많을 수록
코드가 길어질 수 있기 때문에, 상속을 해주는 방법도 있습니다.

extends를 이용하면 변수에 하나의 타입만 정해줘도
& 연산자와 같은 효과를 내는 것을 볼 수 있습니다.

이런 방법들을 이용해 Interface를 활용한다면
다양한 부분에서 계속 재사용을 할 수 있겠습니다.

🧐 근데 이게 재사용에 도움이 되나?

공부하다보니 위와 같은 고민이 생겼습니다.
이렇게 객체 형식으로 여러개의 키의 타입을 정해준다면
정해준 값을 반드시 담아야만 오류가 생기지 않을텐데
변수에 따라서 어떤 값은 넣어야 하고, 어떤 값은 굳이 필요하지 않을때
그런 상황들에 맞춰서 일일히 Interface를 만들어 낸다면
굉장히 불필요한 작업이 되지 않을까 하는 생각을 했습니다.

그래서 그런 문제를 해결하기 위해 옵션을 부여할 수 있습니다..!

이렇게 키 옆에 ?를 넣게 되면
해당 속성을 사용해도 되고 안해도 되는 유연한 Interface가 탄생하게 됩니다.
이런 식으로 필요에 따라 다양한 방법으로 Interface를 구성할 수 있겠습니다.

이번에는 간단하게 Interface에 대해 알아봤는데,
활용 방법은 무궁무진하기 때문에 조금 더 공부해 볼 필요가 있겠습니다.


개인적인 학습을 통해 나만의 개발 공략집을 만드는 과정입니다.
혹 상기 내용에 대해 수정해야할 부분이나 더 공부했으면 하는 부분이 있다면
언제든 댓글로 알려주세요!

친절에 기반한 피드백은 언제나 감사합니다.


참고 자료
TS 핸드북
TS 테스트 할 수 있는 사이트
[기업협업 사수님 머릿속]

profile
잠재력은 핵폭탄급 Frontend Developer

6개의 댓글

comment-user-thumbnail
2021년 9월 5일

잘봤어요 명성님!!!!!!🙇‍♀️

1개의 답글
comment-user-thumbnail
2021년 9월 6일

오 쏙쏙 들어오는데요?

1개의 답글
comment-user-thumbnail
2021년 9월 9일

역시 친절한 명성씨..

1개의 답글