타입스크립트 정리2 - 초기설정

박상훈·2023년 6월 1일

인프런 한입크기로 잘라먹는 타입스크립트 - 이정환님의 강의를 보고
내용을 정리한 포스팅입니다

👨‍💻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

  • true일땐 엄격히 검사

  • false 일땐 유연히 검사

  • JS=> TS로 전환하는 작업시 strict를 true로 되있는 경우 에레가 많이 나와 꺼두기도 합니다.

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

  • true esm 모듈로 실행됩니다.
profile
다들 좋은 하루 되세요

0개의 댓글