[TypeScript] 타입스크립트 개념 및 개발환경 구성

채용사이트에서 프런트엔드 개발자의 자격요건 혹은 우대사항을 보면 TypeScript가 빠지는 일이 없다.

 

이런 사실에 굉장히 자괴감을 느꼈지만,, 도대체 왜?

무엇 때문에 TypeScript가 필수적이고, 알면 무엇이 좋은가에 대해서 하나씩 공부해보려고 한다.

오늘부터 본격적으로 TypeScript 공부 시작이다.(하다 보면 알게 되겠지.)

 

개념부터 차근차근 시작해보려고 하니, TypeScript를 공부할 계획이 있는 사람이 있다면 이 글부터 함께 시작하면 좋을 것 같다.

 

 

 

타입 스크립트(TypeScript)란?

TypeScript는 2012년에 발표된 오픈 소스 프로그래밍 언어로, 대규모 JavaScript 애플리케이션 개발을 목적으로 Microsoft에 의해 개발되었다.

 

TypeScript는 JavaScript, ECMAScript를 포함하는 슈퍼셋(Superset)으로 JavaScript 또는 ECMAScript에서 지원하지 않는 기능을 지원하고 브라우저, 운영체제에 상관없이 이용 가능한 오픈소스이다.

 

즉, TypeScript는 JavaScript의 상위 호환 버전이라는 얘기인데, 무엇을 더 지원한다는 것인가?

 

TypeScript를 대표로 하는 기능은 다음과 같다.

 

• 엄격한 타입 관리(Strongly Typed)
•  
  - 에디터 확장 시, 실시간 타입 검사
• - 컴파일 시점에 타입 검사
• 제너릭(Generics) - 클래스나 함수가 사용될 때 타입 설정
• 인터페이스(Interface) - 타입 검사를 요구
  

  기타...

 

 

TypeScript 파일(ts)은 웹 브라우저에서 바로 해석될 수 없다. 브라우저에서 해석 가능한 언어인 JavaScript로 변경되어야 브라우저는 이를 인식하고 해석할 수 있다. 즉, TypeScript를 JavaScript로 변환해야만 웹 브라우저가 처리 가능하다.

 

 

그래서 TypeScript가 JavaScript로 출력 되기에 컴파일러가 아닌, 트렌스파일러(Transpiler)로 불린다. 그리고 이러한 언어를 메타 언어(Meta Language)라고 부른다.

 

TypeScript는 브라우저 환경뿐만 아니라, Node.js 서버 환경 또는 ECMAScript 3 이상을 지원하는 모든 JavaScript 엔진에서 실행되는 깨끗하고 간단한 JavaScript 코드로 컴파일된다.

 

TypeScript를 사용하면 좋은 점?

타입(Types)을 사용하면 JavaScript 애플리케이션을 개발할 때 정적 타입 검사 및 코드 리팩토링과 같은 생산성 높은 개발을 수행할 수 있다. 타입 설정이 필수는 아니지만, 설정할 경우 컴파일 과정에서 타입 식별자를 사용하여 코드를 정적으로 검증할 수 있다. 타입을 통해 소프트웨어 컴포넌트 간 인터페이스를 정의하고, JavaScript 라이브러리 동작을 파악할 수 있다.

 

 

 

 

그래서 무슨 말이냐고..

정리해보면 TypeScript는 Type이 존재하는 JavaScript이며, 자바스크립트의 장점이자 단점이였던 지나치게 지나친 유연성을 엄격하게 강제하기 위해 만들어진 것 같다.

타입검사가 없으니 다른사람이 만들어 놓은 메서드 등에 잘못된 인자를 넘기는 일 등을 방지하기 위해서인 듯 하다.

 

 

여기까지 정리하면서 다시 한번 느끼는 거지만, 나는 글만 읽는 것보다는 실제로 경험을 해봐야 이해가 되는 타입인 것 같다.

 

 

그럼 실전에서 확인을 해보기 위해 타입 스크립트 개발환경을 세팅해보자.

TypeScript를 프로젝트에 사용하려면 node.js가 설치되어 있어야 한다. 그리고 npm을 통해 개발에 필요한 모듈을 설치/관리할 수 있다.

온라인에서 TypeScript를 실행해보려면 TypeScript 플레이그라운드 에서 확인할 수 있다.

 

나는 node.js 환경을 구성하겠다.

 

1. node.js 설치 파일 다운로드

 

아래 링크로 들어가서 LTS 버전을 다운로드 받는다. 최신버전을 다운로드 해도 상관없지만, 보통 최신버전은 안정화가 되지 않은 버전이다.

나는 16.14.0 버전 Window Installer를 다운로드 했다.

다운로드 링크: https://nodejs.org/ko/download/

 

2. 다운로드된 설치 파일을 열어서 node.js를 설치

설치 과정에서 'Next' 버튼만 눌렀고, 별도 옵션 설정은 건드리지 않았다.

=> 필요에 따라 옵션을 변경해도 된다.

 

3. 설치확인

CMD 창(명령 프롬프트)를 열어서 아래 명령어를 입력한다.

>> node -v

명령어 입력 시 현재 자신의 버전이 표시된다면 정상적으로 설치가 된 것이다.

 

 

4. TypeScript 설치

CMD 창의 root 경로를 적당한 위치로 이동한다.

나의 경우에는 프로젝트가 아니라 단순 공부를 진행하고 있기 때문에 C:\typescript 폴더를 생성해서 해당 경로로 이동했다.

 

이동한 이후에 아래 명령어를 입력한다.

>> npm i -D typescript

 

# npm install --save-dev typescript 라는 의미

 

 

TypeScript 설치가 완료되면 root 폴더에 node_modules폴더와 package.json이 생성된 것을 확인할 수 있다.

 

 

이렇게하면 TypeScript의 기본 개념정리와 개발환경 구성은 정리가 된 것 같다.

본격적인 코딩은 다음 포스팅에서 정리해야겠다.

 

 

---

참고: https://yamoo9.gitbook.io/typescript/