인프런 한입크기로 잘라먹는 타입스크립트 - 이정환님의 강의를 보고
내용을 정리한 포스팅입니다
👨💻TS초기 설정
npm init 초기화후
npm i @types/node
npm install typescript -g // 전역설치 (설치가 안될경우 mac은 sudu / window는 관리자권한으로 실행 해야 설치가 됨 )
tsc src/index.ts 터미널에서 입력시 컴파일 실행이되고 index.js파일이 생성됩니다
npm install ts-node -g //ts와 노드를 한번에 까는법
tsc --init
TS 파일을 컴파일 하는법
- ts-node 폴더위치/파일.ts 입력
- tsc 입력시 폴더내 TS 파일들이 JS파일들로 생성됩니다.
tsconfig
- TypeScript 컴파일러의 설정 파일로, 프로젝트의 컴파일 옵션과 대상 파일들을 설정하는 역할을 합니다.
CompilerOptions
- CompilerOptions는 TypeScript 컴파일러의 설정 옵션을 지정하는 부분입니다.
CompilerOptions - target
- target: "es5" 대신에 "es6"이나 "ESnext" 등의 최신 JavaScript 버전을 대상으로 설정할 수 있습니다.
CompilerOptions - module
- module: "commonjs" 외에도 "es2015", "esnext" 등 다양한 모듈 시스템을 선택할 수 있습니다.
CompilerOptions - strict
include
- tsconfig.json 파일의 "include" 옵션은 컴파일할 대상 파일들을 지정하는 역할을 합니다.
- 일반적으로 "include" 옵션은 프로젝트 내의 TypeScript 소스 파일들을 지정하여 컴파일 대상으로 설정합니다. 이렇게 지정된 파일들은 컴파일러에 의해 TypeScript에서 JavaScript로 변환됩니다.
타입스크립트는 모든 모듈을 전역 모듈 로 취급합니다.
그렇기에 모든 변수가 같은 곳에 있는 것으로 취급됩니다.
두가지 해결방법
첫번째
- export import 같은 모듈 시스템 활용하는방법
- 이럴경우 독립된 모듈로 판단합니다.
두번째
- tsconfig 옵션 조절
- 각각의 파일을 어떤 모듈로 감지할지 정하는옵션
- "moduleDetection" : "force"
- 각각의 파일들을 개별 모듈로 자동으로 만들어 줍니다.
- export/import 가 자동으로 추가 됩니다.
tsconfig 수정 후 작동이 안될때
- 컨트롤 + P
- ">restart" 검색 후 실행
- ts가 다시 실행 다시 검사합니다.
ts-node를 사용하기 위한 설치 방법
- npm install ts-node -g 명령어를 통해 전역으로 설치할 수 있지만, 보다 권장되는 방법은 로컬 프로젝트에 설치하는 것입니다. 이를 위해서는 package.json 파일의 scripts 부분에 "start": "ts-node 파일명.ts"와 같은 형태로 스크립트를 추가하고, npm start 명령어로 실행할 수 있습니다.
ts-node esm