TypeScript - 기본 개념과 설치해보기

1. TypeScript?

 

JavaScript에 Type이라는 개념을 적용한 컴파일 정적 타입 언어

 

• MS에서 개발하고 관리하는 오픈소스 프로그래밍 언어입니다.
• TypeScirpt는 JavaScript에 Type이란 개념을 추가함으로써 확장시킵니다.
• TypeScript는 코드를 실행하기 전에 컴파일(또는 트랜스파일)을 통해 에러를 디버깅하는 데 시간을 절약하게 해줍니다.
• 어떤 브라우저나 OS, JavaScript 실행 환경에 적용할 수 있습니다.

 

TypeScript는 JavaScript(ECMA Script) 전체를 포함하며, 여기에 추가적인 기능을 제공하기도 합니다.

 

TypeScript로 작성된 코드는 컴파일 과정을 거쳐 JavaScript로 변환하고, 이는 JavaScript 실행 환경인 브라우저나 Node.js에서 실행됩니다.

// JavaScript
function add(n1, n2) {
  if ( typeof n1 !== 'number' || typeof n2 !== 'number') {
    throw new Error('Incorrect input!');
  }
  return n1 + n2;
}

// TypeScript
function add(n1: number, n2: number) {
  return n1 + n2;
}

 

 

2. TypeScript를 왜 사용해야 할까?

 

TypeScript는 지난 몇 년 동안 인기가 높아졌습니다. 가장 큰 프런트엔드 프레임워크 중 하나인 Angular는 TypeScript를 사용하고 있고, JavaScript 프로그래머의 약 60%는 이미 TypeScript를 사용하고 있습니다. 왜일까요?

 

역사적으로 JavaScript는 인터넷에서 웹 페이지와 앱을 스크립팅하기 위한 주요 언어로 자리잡았지만, 현대 웹과 같은 크고 복잡한 시스템을 만들기 위해 만들어지진 않았습니다.

 

인터프리팅 언어인 JavaScript는 컴파일 언어에 비해 실행 속도가 빠르지만 안정성이 떨어지는 단점이 있습니다.

TypeScript를 사용하면 코드가 실행되기 전에 컴파일을 통해 에러를 미리 발견하고 디버깅을 할 수 있기 때문에 JavaScript의 안정성을 보완할 수 있습니다. 실제로 한 연구에 따르면 모든 JavaScript 오류의 15%를 TypeScript로 감지할 수 있다고 합니다.

 

또한 JavaScript의 동적 타입은 종종 프로그래머의 작업 효율성을 감소시킬 뿐만 아니라 새로운 코드 라인을 추가하는 비용 증가로 이어지기도 합니다.

 

따라서, JavaScript가 Type 지정이나 컴파일 오류 검사와 같은 것을 하지 못하면, 엔터프라이즈 및 대규모 서버 측 코드에 적합하지 않을 것입니다.

 

이제 TypeScript가 대략적으로 어떤 것인지 알게 되었으니, 설치하는 방법을 알아보겠습니다.

 

3. TypeScript 설치

 

먼저, JavaScript 실행 환경을 만들어야 하므로 Node.js(또는 브라우저)를 설치해야 합니다.

 

공식 사이트에서 다운받아 설치하시거나..

https://nodejs.org/ko/download/

다운로드 | Node.js

 

리눅스 환경이라면 패키지 관리자를 통해 설치해주시면 됩니다.

Locky Linux와 같은 Redhat 계열 리눅스에서 설치하는 방법은 아래 링크의 글에 정리해 놓았습니다.

 

https://sty110357.tistory.com/28?category=509308 

Rocky Linux에 node.js 설치하기

 

이제 npm(Node Package Manager)을 사용해 TypeScript 컴파일러를 설치합니다.

아래 방법은 TypeScript를 컴퓨터 전역 범위에 설치하는 방법입니다.

npm i typescript -g

- i : install 명령어

- g : install의 global 옵션으로, 현재 경로만이 아닌 전역으로 사용할 수 있도록 설치하는 옵션

 

TypeScript가 설치됐는지 확인하기 위해 간단한 ts 파일을 만들고, tsc(TypeScript Compiler) 명령어를 통해 컴파일 해봅니다.

vi test.ts

 

test.ts

console.log('hi');

 

tsc test.ts
cat test.js

 

디렉터리에 있는 ts 파일을 한꺼번에 컴파일 하고 싶을 땐, tsc config 파일을 생성해줘서 컴파일 할 수 있습니다.

mkdir ts-project
cd ts-project

tsc --init
tsc
ls

 

ts 파일이 변경되었을 때 자동으로 컴파일되길 원한다면 아래와 같이 Watch 모드를 사용할 수 있습니다.

tsc -w

 

다음은 특정 프로젝트에만 TypeScript 컴파일러를 설치하는 방법입니다.

먼저, 전역 범위로 설치된 TypeScript를 제거합니다.

npm uninstall typescript -g

 

다음으로, Node 패키지를 관리하기 위한 package.json을 생성하기 위해 초기화를 해줍니다.

cd ts-project
npm init -y

-y: npm init을 하게 되면 프로젝트 이름 등 여러가지를 물어보는데, 귀찮으면 이 옵션으로 생략할 수 있다.

 

이제 ts-project 디렉터리는 npm 프로젝트가 되었습니다.

마지막으로 TypeScript를 설치합니다.

npm i typescript
cat package.json

 

이제 tsc를 사용해봐야 하는데, 프로젝트 안에서 실행할 때는 node_module/.bin 경로의 tsc 심볼릭 링크를 실행해줘야 합니다.

node_modules/.bin/tsc test.ts

 

하지만 명령어가 너무 길기 때문에, 최근 npm 버전에 포함된 npx를 사용하면 줄일 수 있습니다.

npx tsc test.ts

 

이제 마찬가지로, 프로젝트 내 모든 ts 파일을 한 번에 컴파일 하기 위해 ts config 파일을 만들고 Watch 모드를 실행할 수 있습니다.

npx tsc --init
npx tsc
npx tsc -w