자바스크립트는 웹 사이트를 동적으로 만들기 위해 개발된 언어로 굉장히 많은 웹 사이트에서 동작하고 있습니다. 자바스크립트가 개발될 당시에는 이렇게까지 영향력 있는 프로그래밍 언어가 될거라고 예상하지 못 하였고 단 구체적인 디자인 방향에 대한 설정이 없이 제작되었습니다.
그 결과, 자바스크립트 코드를 작성하다보면 다른 프로그래밍 언어와는 다르게 예측할 수 없는 에러가 많이 발생하게 됩니다. 이러한 문제점들을 보완해오면서 현재 사용하고 있는 모던 자바스크립트가 되었습니다. 오래된 자바 스크립트 문법을 사용하는 웹페이지가 굉장히 많기 때문에 이 언어의 근본적인 문제점을 수정할 수는 없었습니다.
자바스크립트의 문제점 중에 대표적인 것은 동적 타입을 가진다는 것 입니다. 문자열과 숫자를 산술 연산자를 통해 연산하면 새로운 문자열이 되거나 불린 값과 숫자를 연산하면 새로운 숫자가 리턴된되는 등 개발자가 전혀 예상하지 못했던 결과를 도출하고는 합니다.
이 문제를 해결하기 위해 TypeScript를 사용합니다. 이 프로그래밍 언어는 자바스크립트를 사용하면서 발생할 수 있는 에러를 방지하고 객체지향 프로그래밍을 위한 Class, Interface 등 또한 지원합니다.
TypeScript는 Visual Studio의 Plugin을 이용해서 별도의 설치 없이 사용해도 됩니다. 이번 포스팅에서는 npm으로 설치하는 방법에 대해 정리하겠습니다.
설치 방법(전역 설치)
T특정 프로젝트 내부에서만 사용하기 위해서는 그 프로젝트의 루트 경로에 설치해서 사용하면 됩니다.
TypeScript 코드는 컴파일러를 통해 js 파일로 변경 된 후 브라우저나 node.js와 같은 런타임 환경에서 동작하게 됩니다.
컴퓨터 전역에서 사용하기 위해서는 "-g" 키워드를 이용해서 설치합니다.
npm install tsc -g특정 폴더에 "tsc --init" 명령어를 통해 tsconfig.json 파일을 생성합니다.
tsc --init폴더 내부에서 "tsc" 명령어를 사용하면 루트 폴더 내부에 있는 .ts 확장자 파일들이 .js 확장자로 컴파일이 됩니다. 또한 "-w" 키워드를 통해 watch 모드를 사용하면 ts 파일이 수정될 때 마다 자동으로 js파일로 컴파일 해줍니다.
tsc // 루트 경로의 ts 파일 컴파일
tsc -w // watch 모드 사용설치 방법(npm 프로젝트 설치)
프로젝트의 루트 경로에서 npm init -y로 npm 프로젝트를 생성하고 그 경로에서 설치해주면 node.modules 내부에 typescript가 설치되고 루트 경로에 tsconfig.json 파일이 생성 됩니다.
npm install tsc컴파일러 실행 방법
npm 다음과 같은 명령어를 통해서 컴파일러를 사용할 수 있습니다.
// 세가지 코드 모두 컴파일러를 실행시키는 코드 입니다.
node_modules/.bin/tsc
node_modules/typescript/bin/tsc
npx tsc