[TS] TypeScript 시작하기

 

TypeScript(TS)를 공부한 내용에 대해 기록합니다.

 

---

 

왜 TS를 공부하게 되었는지?

 

저는 Nest와 TS를 동시에 배우게 된 케이스입니다. 아니 Nest를 먼저 배웠어요.

사실 JS도 기초만 안 상태였는데,  3시간짜리 유튜브 영상으로 TS가 뭔지 대충 맛만 보고

인프런 강의로 Nest 공부를 시작했죠.

 

[지금 무료] 따라하며 배우는 NestJS 강의 - 인프런

 

 

이게 뭐야. 뭐 하는 거지? 싶은 나날들이 지나다가 어느 순간 Nest 구조가 조금 익숙해지는 날이 오더군요.

그러면서 자연스럽게 더 좋은 코드를 짜기 위해서는 '아 지금 TS를... Type을 공부해야겠다!'는 생각이 들었던 것 같아요.

 

 

다시 기초로 내려가면서 공부를 하니 머릿속에는 들어있지만 막연한 느낌이 들어

블로그에 쭉 정리를 해볼까 합니다.

 

 

---

 

TypeScript(TS)가 뭐에요? 왜 쓰죠?

 

JS기반의 정적 타입 문법을 추가한 프로그래밍 언어입니다.

이후에는 JS로 컴파일되어 실행되죠.

 

그게 다에요. JS에 type을 부여했다!

 

JavaScript With Syntax For Types.

 

 

그럼 TS를 왜 쓸까요?

 

JS의 경우는 아래처럼 함수가 개발자의 의도와 달리 사용되어도 아무런 오류를 던져주지 않죠. 

 

function add (num1 , num2){
  return num1 + num2;
}

console.log(add());       // NaN
console.log(add(1));      // NaN
console.log(add(1,2));    // 3
console.log(add('1',2));  // '12'

 

 

TS를 사용하면 이를 막을 수 있습니다.

function add (num1 : number , num2 : number) : number {
  return num1 + num2;
}

console.log(add());       // err!
console.log(add(1));      // err!
console.log(add(1,2));    // 3
console.log(add('1',2));  // err!

 

 

 

정적 타입을 명시해서 얻을 수 있는 이점을 생각하면 됩니다.

1. 개발자가 의도한 변수나 함수 등의 목적을 더욱 명확하게 전달 가능
2. 이를 기반으로 코드 자동 완성이나 잘못된 변수/함수 사용에 대한 에러 알림 같은 풍부한 피드백을 받을 수 있게 됨

 

즉, TS는 순수한 JS에 비해 코드의 안정성과 생산성을 올려줍니다.

 

 

전 JS의 장점이 '느슨한 타입과 어떻게든 돌아간다..!'라고 생각해서 TS 자체가 이상하게 느껴졌어요.

TS를 굳이 굳이 써야..하나...? 애초에 정적타입이 잘 되어있는 다른 언어들을 쓰면 되지 않나? 왜 이렇게까지..?

 

그만큼 Node.js 백엔드가 강력하게 성장하고 있고,

그에 따라 JS로 안정적인 프로그래밍을 하고자 하는 수요가 커진 게 아닐까.. 하고 생각합니다.

 

 

 

Type

 

저는 Nest에서 대충 TS를 사용해 보면서 이게 JS랑 다른 게 뭐지 하는 생각이 자꾸 들었어요.

'TS를 사용하고 있긴 한데 TS에 대해 아무것도 모르겠는데...?'

 

그야 Type(타입)을 잘 못쓰는 상태였거든요.

 

저는 아래 글을 읽고 TS 쓴다는 게  뭔지 더 명확하게 이해할 수 있었어요.

 

Zhenghao's site

 

• 타입스크립트 코드를 작성할 때 우리는 끊임없이 두 세계 사이에서 왔다 갔다 해야 합니다.
  타입 세계에서는 타입을 만들고, 자바스크립트 세계로 가서 타입 어노테이션으로 타입을 "소환"합니다.

 

정확한 타입을 짜는 건 생각보다 쉽지 않은 일입니다. 때로는 개발에 방해되거나 번거롭기도 해요.

그러나 Type을 잘 이해하지 못한 상태에서 TS를 쓰는 건 오히려 안정성을 해치는 일이 됩니다.

 

때문에 TS를 잘 쓰기 위해선 좋은 타입이 뭔지 고민하는 노력이 필요하다고 생각해요.

 

 

6 TypeScript Typing System Tricks You Should Know

 

• 타입을 구체적으로 선언하고 타입스크립트의 타입 시스템을 잘 사용하는 것은 우리의 코드를 가독성 있게 유지가 용이하게 강력하게 만들어줍니다!

 

 

---

 

 

 

TS의 기본 타입

타입스크립트의 기본 타입에는 크게 다음 12가지가 있습니다.

 

• Boolean
• Number
• String
• Object
• Array
• Tuple
• Enum
• any
• void
• null
• undefined
• never

 

 

Any와 Never

기본 타입을 공부하면 any와 never가 등장합니다. 

 

• any는 모든 타입을 허용한다.
• never는 절대 일어나지 않는다. 도달하지 못한다.

 

처음 배울 때는 아 그렇구나 하고 넘겼는데 유니온 타입(Union type)이나 인터섹션 타입(Intersection type)을 배울 때

또는 그 이후가 될수록 정확히 뭔지 아리송해졌던 경험이 있습니다. (+unknown)

 

이 말을 정확히 이해하려면 TS의 타입은 집합이다! 라는 것을 이해해야 합니다.

TS에선 '이 값은 이 타입인가?' 보다 '이 값은 이 타입 집합의 원소인가?'가 더 정확한 표현이죠.

 

 

그래서 정의를 다시 써보면 아래와 같습니다. 

 

• any는 모든 타입의 부분 집합 그리고 상위집합이다.
• never는 공집합이다.

 

Documentation - Type Compatibility

 

 

 

 

---

 

 

 

 

 

 

type-challenges

타입챌린지는 타입을 사용해서 여러 유틸 함수들을 구현해 보고 공유할 수 있는 깃허브 프로젝트입니다.

타입을 어느 정도 공부했다면 풀어보시길 추천해요. 

 

GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge

 

 

저는 해당 레포를 fork 해서 푼 것들을 이슈로 추가하는 방식으로 하고 정답을 추가하고 있답니다.

 

GitHub - rimo030/type-challenges: Collection of TypeScript type challenges with online judge

 

 

 

 

감사합니다.

 

---

 

공부한 내용을 복습/기록하기 위해 작성한 글이므로 내용에 오류가 있을 수 있습니다.