[5.1.6 버전]
개념
ts는 js에 타입을 추가하여 확장한 언어이다. 이를 통해 코드 실행 시 발생하는 에러를 잡거나 고치는 시간을 절약할 수 있다. 또한, 어떤 브라우저나 OS, 실행환경에서도 완벽히 작동한다. 그러나 ts 파일은 단독으로 실행될 수 없으며, 컴파일러를 통해 브라우저가 이해할 수 있는 순수 js로 변환해야 한다.
js 인터프리티드 언어이다. 이는 소스 코드를 컴파일하지 않고, 런타임에 한 줄씩 해석하여 실행하는 방식을 의미한다.
하지만 TypeScript는 컴파일드 언어이다. 물론 C++나 자바와 같은 전통적인 컴파일드 언어와 차이점이 있지만, 컴파일 시점이 유사하여 컴파일드 언어로 불리기도 한다. 일부 개발자들은 이를 트랜스파일이라고 부르기도 한다.
Compiled와 Interpreted의 차이
- 컴파일 필요 o / 컴파일이 필요 x
- 컴파일러 필요 o / 컴파일러 필요 x
- 컴파일하는 시점 o / 컴파일 하는 시점 x
- 컴파일된 결과물 실행 / 코드 자체를 실행
- 컴파일된 결과물을 실행하는 시점 / 코드를 실행하는 시점(런타임) -> 에러 확인 시점
- 인터프리터보다 빠른 경향이 있다 / 컴파일언어보다 느린 경향이 있다
설치
-
npm init - y
npm 라이브러리의 dependancy가 등록될 수 있는 형태로 만드는 것을npm init을 통해 할 수 있다.
vscode의 터미널에서 이 명령어를 실행할 때, -y를 뒤에 붙이면 추가 사항을 전부 yes로 통과해 빠른 설치가 가능하다. 그리고 이렇게 만들어진 프로젝트를 npm 프로젝트라고 한다. -
npm i typescript -D
typescript node는 런타임에 필요하지 않기 때문에 -D 명령어와 함께 설치한다.
-D는 devdependencies의 약자로, 개발용으로 사용함을 의미한다.
tsc --init
프로젝트 내부의 ts파일을 js로 컴파일하고 싶다면, tsc 명령어를 통해 실행할 수 있다. 하지만 프로젝트 특성상 프로젝트 내부의 모든 ts파일을 어떤식으로 컴파일해야할지를 담은 설정파일을 넣어줘야한다.
이러한 설정파일을 자동으로 생성해주는 디폴트 명령어가 있다. 바로 tsc --init 이다. 이 설정파일의 이름은 tsconfig.json이다
npx tsc
ts로 작성된 프로젝트를 실행하는 코드이다. 컴파일을 진행할 수 있다.
또한 test.ts 라는 파일의 내용을 변경하면, 즉시 test.js 파일이 새로 생성되도록 컴파일을 자동화하느 명령어가 있다. tsc -w이다. w는 watch의 약자이며 ts 파일의 업데이트를 지켜보겠다는 뜻이다. 또한 vscode에는 typescript compiler가 내장되어 있다. 내장된 컴파일러 버전은 vscode가 업데이트 되면서 올라간다.
그래서 컴파일러 버전과 vs code의 버전은 상관 관계가 있다. 내장된 컴파일러를 선택할 수 있고, 직접 설치한 컴파일러를 선택할 수도 있다.
