우리가 사용하는 자바스크립트에 타입을 추가하여 확장시킨 것
그래서 타입스크립트는 코드를 실행하기 전에 에러를 잡는 시간을 세이브해준다.
타입스크립트는 컴파일을 통해서 이해할 수 있는 자바스크립트 코드로 변환된다.
npm i typescript -g를 이용하여 컴퓨터 어디서든 타입스크립트를 사용할 수 있도록 타입스크립트를 설치할 수 있다.
그리고 tsc 키워드를 이용하여 타입스크립트를 컴파일할 수 있다.
즉, js파일로 변환할 수 있다.
ex. tsc test.ts (test.ts 파일을 컴파일)
이 때 tsc는 type script compile 의 약어이다.
이렇게 컴파일을 하면 컴파일된 test.js 파일이 같은 폴더에 생성된다.
mkdir : 폴더를 만드는 키워드
cd ~: 하위 디렉토리 ~ 로 이동하는 키워드
tsc 명령어를 대상파일을 지정하지 않고 실행하면 현재 폴더에 있는 타입스크립트 설정 파일을 기준으로 변환 작업을 수행한다.
만약 현재 폴더에 타입스크립트 설정 파일이 없다면 프로젝트 폴더 내에서 상위 폴더의 경로를 검색해 나간다.
이 설정파일의 이름은 tsconfig.json 이어야 한다.
이 설정파일을 default로 생성해주는 명령어는 tsc --init 이다.
Tip. cd .. 을 이용하면 상위 폴더로 이동할 수 있다.
이렇게 하여 tsconfig.json이 현재 폴더 또는 상위 폴더에 존재하는 상태로 tsc를 실행하면 프로젝트 내의 모든 타입스크랩트 파일에 대하여 컴파일이 시행된다.
그리고 tsc -w 라는 옵션을 달면 파일이 수정될 때마다 ts파일이 js파일로 컴파일이 된다.
이번에는 타입스크립트를 글로벌로 설치하지 않고 패키지에 설치하여 사용해보자.
타입스크립트를 글로벌로 설치하면 타입스크립트가 머신에 깔려있어야 하는 전재하에 실행이 되기 때문이다.
npm을 통해 typescript 를 설치하면 이렇게 package.json의 dependencies에서 typescript를 볼 수 있다.
여기서 typescript compiler는 해당 프로젝트의 node_modules 폴더 안에 설치가 된다.
그리고 이 typescript 폴더의 bin 폴더를 보면 tsc.js 라는 파일이 보인다.
node_modules의 .bin폴더에도 tsc라는 파일이 있다.
그래서 tsc는 node_modules/.bin/tsc 또는
node_modules/typescript/bin/tsc 로 실행할 수 있다.
그런데 이들은 타이핑이 너무 기므로 npm버전이 올라가면서 npx tsc 라는 명령어로 컴파일이 가능하도록 업데이트되었다.
물론 그전에 npx tsc --init으로 기본적인 tsconfig.json 파일은 생성해주어야 한다.
그리고 이전과 같이 npx tsc -w를 하면 이전처럼 파일을 수정할 때마다 컴파일이 된다.
그리고
{
"name": "TSstudy",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"build": "tsc"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"typescript": "^4.7.4"
}
}package.json을 이렇게 수정해주면 npm run build 명령어를 통해 컴파일이 가능하다.
tsc 앞의 경로가 생략된 이유는 해당 프로젝트에서 tsc 파일을 자동으로 찾아 실행해주기 때문이다.
npm run build:watch 라고 하면 파일을 수정할 때마다 자동으로 컴파일이 되게 된다.
Tip.
tsc라고 cmd에 입력하면?
환경변수에 등록된 경로로 이동하여 거기에 있는 tsc를 실행
npx tsc라고 cmd에 입력하면?
이 명령어를 수행하는 npm은 현재 프로젝트에 설치된 것이므로 현재 프로젝트에서 tsc를 찾아서 실행
npm run build의 경우에도
build는 tsc라고만 정의했지만 이는 npm에서 수행하는데(npm run 이니까)
이 npm은 현재 프로젝트에 설치된 것이므로 현재 프로젝트에서 tsc를 찾아서 실행
