도대체 TypeScript가 뭘까?

📌 TypeScript Documentation을 기반으로 하며, 저의 의견이 포함되어 있습니다.

갑자기 TypeScript?

💡 나는 자바를 조금 공부하긴 하였으나 자바스크립트를 주로 사용하면서 변수 타입에 대해 크게 생각하지 않고 사용했다. 짧은 나(코린이)의 생각으론, 여러가지 내 맘대로 사용할 수 있으면 좋은 거 아닌가?! 이렇게도 쓰고 저렇게도 쓰고! 자유로우니 좋잖아! 생각했다.

그러나 여러 피드백과 코드 작업으로 때론 이 자유로움이 독이 될 수 있다는 것을 점점 깨닫고 있고, 변수 타입에 대해 좀 더 고민하며 작업하고 있다. 혼자 작업하는 것이 아니기에 자유로움보다 안정성이 더 중요한 것이다.

그래서 TypeScript로의 이전을 위하여 검토하고 있으며, 그것에 대해 현재 페이지에 기록할 예정이다.

갑자기가 아닙니다

Google, Microsoft, Facebook 같은 큰 기업에서 이미 사용하고 있고, 국내 기업에서는 카카오, 배달의 민족 등 프로젝트가 점점 커지고 있는 기업들도 TypeScript를 사용 또는 고려하고 있다. 또한 StackOverflow의 Developer Survey의 결과에서도 TypeScript가 순위권에 랭크되어 있고, GitHub의 Octoverse에도 순위권에 올라와 있다고 한다.

TypeScript가 코드의 질을 향상하고 이해도를 높이기 위해 효과적이라는 것은 많은 사용자들의 사용으로 알 수 있다.

위의 기업들처럼 더 안정성 있는 협업을 위해 TypeScript를 사용해 보는 것도 좋을지도?

---

TypeScript란?

TypeScript는 MicroSoft에서 만들었다. open source화 되어 있으며, MicroSoft에서 vscode를 만들 때 TypeScript로 만들었다고 한다!(우와)

💡 TypeScript: 정적 타입 검사자 (TypeScript: A Static Type Checker)

프로그램을 실행시키지 않으면서 코드의 오류를 검출하는 것을 정적 검사라고 한다.

TypeScript는 프로그램을 실행시키기 전에 값의 종류를 기반으로 프로그램의 오류를 찾는다.

변수에 타입을 지정해준다

아래는 JavaScript와 TypeScript의 차이에 대한 간단한 예제이다.

// JavaScript
let foo;

foo = 1;
foo = 'Hello, JavaScript!'

// TypeScript
let foo: number;           // error!

foo = 1;
foo = 'Hello, JavaScript!' // error!

위의 예처럼 TypeScript는 변수에 타입을 지정해준다.

TypeScript의 장점

• 런타임 때 프로그램이 깨지는 것보다 컴파일 때 에러가 나는 것이 좋다.
• 컴파일 때 어느 부분이 깨지는지 알려주기 때문에 리팩토링에 편하다.
• 장기간 유지보수에 편하다.
  • 동적 타이핑은 단기적으로 사용할 경우 큰 생산성을 보여주지만, 장기적으로 유지보수 하는 경우 어려움을 느낄 수 있다.
  • but, 장기간 유지보수 할 필요가 없다면 TypeScript는 더 많은 코드를 짜야하기 때문에 도움이 되지 않을 수 있다.
• 타입을 명시하므로 코드를 읽기 쉬워진다.

TypeScript는 완전히 새로 공부해야 하나요?

TypeScript는 JavaScript의 상위 집합이며 TypeScript는 컴파일 타임 타입 검사자가 있는 JavaScript의 런타임이다. 위의 그림처럼 ES6와 ES5의 기능들도 지원한다.

JavaScript를 배우지 않고서는 TypeScript를 배울 수 없으며, JavaScript를 사용할 줄 안다면 TypeScript도 금방 익힐 수 있다고 한다.

아래 링크는 TypeScript 한글 문서이다. 친절하게 한글로도 번역되어있다니! 🥺

TypeScript 한글 문서

TypeScript 기본 문법

아래는 TypeScript 기본 문법에 대한 몇가지 예제이다.

타입 표기 (Type Annotation)

식별자 또는 값 뒤에 콜론(:)을 붙여 value: type의 형태로 표기한다.

let foo: number = 1;

배열

자바스크립트 Array 값의 타입을 나타내는데 쓰이며 원소 타입 뒤에 대괄호([])를 붙여 표현한다.

let foo: string[] = ['Hello', 'TypeScript', 'World!'];

튜플

원소의 수와 각 원소의 타입이 정확히 지정된 배열의 타입을 정의할 수 있다.

let foo: [string, number] = ['I love you', 3000];

---

마치며

이번 포스팅에서는 간단한 TypeScript의 설명과 몇가지 기본 문법에 대해서 기록해보았습니다.

다음 포스팅에서는 TypeScript 문법에 대해 더 자세하게 기록할 예정입니다.

참고한 문서 및 글

https://typescript-kr.github.io

https://ahnheejong.gitbook.io/ts-for-jsdev/

https://roylory.gitbooks.io/typescript-book-ko/content/

https://velog.io/@hyun_sang/TypeScript를-사용하는-이유는

https://imraccoon-developer.tistory.com/11