23.05.04~ / TypeScript Study, 개념정리
build
sudo npm install typescript -g 으로 tsc를 설치하여 실행할 경우 같은 문법을 가진 js 파일이 만들어지며 tsc src/파일명.js 으로 실행할 경우 변환된 해당 js 파일을 실행해보여준다.
다만 이 경우는 ts 작성 → js 변환 → js 실행 의 과정을 거치므로 번거롭다.
따라서 sudo npm install ts-node -g을 사용새 ts 파일을 직접 컴파일 해주도록 하자.
tsconfig.json
tsc init 으로 컴파일러를 직접 설정해보자.
{
"compilerOptions": {
"target": "ESNext",
// target옵션을 사용해 생성되는 js 파일을 가장 최신으로 컴파일한다.
// ES5, ES6 처럼 지정할 수 있지만 ESNext로 입력할 경우 가장 최신 ES를 의미
"module": "ESNext",
//module에 적힌 js코드로 설정하여 변환할 수 있다.
"outDir": "dist",
//컴파일 결과를 어디에 만들어줘 라고 지정하는 옵션
"strict": true,
//엄격하게 이 파일에 대한 타입을 검사하겠다
//켜고 개발 하는 것이 당연 좋으나, js->ts로 마이그레이션 하는 경우는 기존의 js 코드가 모두 에러처리 됤 수 있으므로 상황을 보아야 함!
"moduleDetection": "force"
//module 설정에 따라 독립된개체화 하는 문법이 달라진다.
//모든 파일을 export 해줄수는 없으므로 기본값으로 가지고 가자.
},
"include": ["src"],
// src라는 경로 아래에 포함되어있는 모든 파일을 컴파일한다.
"ts-node": {
"esm": true
},
}실습을 진행할 동안 위 컴파일 옵션은 기본으로 설정하며 익히도록 하자.
"moduleDetection": "force"
js에서는 다른 파일에서 같은 변수명을 사용해도 각각의 블록으로 취급되나,
ts의 경우 동일한 프로젝트 내에 속해있는 파일들이 전역취급된다.
해결 1) export{};모듈을 소환한다. -> 독립된 개체로 인식된다.
해결 2) "moduleDetection": "force"을 설정한다
｡˚⋆｡˚ ☁︎˚｡⋆｡˚☽˚｡⋆˚ ☁︎˚