실례합니다만 초면입니다_TS

김명성·2021년 8월 31일
3

TS

목록 보기
1/2
post-thumbnail

🙋🏻‍♂️ TypeScript

이번 기업협업을 통해서 초면이지만 자주봐야할 친구가 생겼습니다.
여러분에게 제 친구 TS를 소개해봅니다.
아마도 여러분에게도 좋은 친구가 될거라 생각하고 소개하겠습니다.
모른척 마시고 친하게 지내보시길 바랍니다.

🙋🏻‍♂️ 왜 쓰는 걸까요?

지금까지는 JS를 사용해왔는데,
왜 기업에서는 JS가 아닌 TS를 사용하는 걸까요?

그 부분은 TS가 가진 특징과 연관지어 생각해 볼 수 있겠습니다.

먼저 JS에는 따로 변수에 대한 정의를 해주지 않아도 값이 저장이 되는데,
이렇게 숫자와 문자를 더하는 상황이 생기면
처음 생각한 값 (3)이 아닌 12가 나와버리는 상황이 발생합니다.

지금 같은 경우에야 예시를 위해 간단한 코드를 작성해
어떤 부분에서 오류가 있었는지 쉽게 발견할 수 있겠지만,
몇백줄의 코드를 작성한 상황에서 이런 오류가 발생한다면
그 문제를 찾아 내는데만 엄청난 시간을 소모하게 되겠죠....ㅜㅜ

그래서 TS는 변수를 선언할 때 해당 변수의 타입을 미리 지정해 주고,
해당 타입에 맞지 않는 값을 넣어주려고 하면 이렇게 에러를 발생시켜
훗날 있을 에러를 미리 방지해 주는 역할을 합니다.

또한 코드 자동 완성 기능으로 종종 발생하는 오타문제도
어느정도 해결을 해 줄 수 있습니다.

👉 기본적인 선언 방법

가장 기본적인 TS의 선언 방법은
변수를 설정 한 뒤 :를 입력하고 해당 변수의 타입을 지정해 주면 됩니다.
타입의 종류에는 여러가지가 있지만, 그 부분에 대해서는 공부하는 것으로 남기고..

TS의 가장 기본적인 방식은 이러합니다.

🧐 동시 선언은 못하나요?

물론 가능합니다.!

a 변수에 선언된 타입을 보면 stringnumber|를 사이에 두고 선언됐고,
a 변수에 숫자와 문자가 들어가도 에러가 발생하지 않는다는 것을 볼 수 있습니다.
| 의미가 or의 의미를 담고 있기 때문에 두가지를 선언하는 것이 가능합니다.

하지만 아래 있는 &를 확인해 보면 조금 다르다는 것을 볼 수 있습니다.

&는 각 타입을 섞는 연산자이기 때문에 에러가 발생하는 것을 확인할 수 있습니다.

&는 주로 interface를 섞을 때 사용하게 되는데
이 부분은 interface를 다룰 때 조금 더 자세하게 알아보도록 하겠습니다.

🧐 타입을 만들어 낼 수 있나요?

이번에도 역시 그렇습니다.
type 이라는 것을 이용해 type의 이름을 만들고
변수에 해당 타입을 선언해주면 사용이 가능합니다.

이렇게 타입을 미리 만들어 둠으로서 타입의 재사용이 가능해지기도 하겠네요!

다음에는 좀 더 TS와 친해져서 돌아와 보겠습니다..!


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

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


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

profile
잠재력은 핵폭탄급 Frontend Developer

2개의 댓글

comment-user-thumbnail
2021년 9월 1일

타입스크립트 레츠고!!ㅎㅎ

1개의 답글