타입스크립트 환경 설정

1. npm init 설치

2. Node.js 타입 정보를 갖고 있는 TypesNode 패키지설치

npm i @types/node

3. TypeScript 컴파일러 설치

 npm install typescript

4. 타입스크립트 버전 확인. 컴파일러가 잘 설치 되었는지 확인(5점대 여야함)

tsc-v

컴파일 하기 (ts➡️js)

tsc src/index.ts

🧑‍🏫컴파일 완료

• 컴파일된 자바스크립트 파일 실행하기

$ node src/index.js

• tsx 설치(타입스크립트 컴파일러 + node.js)

npm i -g tsx

➡️tsx src/index.ts 타입스크립트 파일을 한방에 실행 해줌.

컴파일 파일 하나의 폴더로 저장하기

"outDir": "dist"

여기서 tsc를 하면

dist 폴더에 js파일이 컴파일되어 생성

타입 엄격하게 검사하는 모드

"strict": true

• 🤔뭐가 엄격한거고 안엄격한게 뭐임?

다른 파일에서 같은 변수명 불가능

1. 글로벌 모듈
2. 개별 파일로 나누기위해 (export, import 사용)
3. "moduleDetection": "force"을 사용하면 자동으로 해결

• 타입스크립트는 전역모듈로 봐서 다른 파일이어도 같은 변수명을 사용하지 못한다.
• 파일을 나누는 이유가 없다.

같은 변수명 쓰는 방법 2가지

1. export나 import를 사용하면 독립된 모듈이라고 생각하게됨.
   

2. 

"moduleDetection": "force"

tsc로 컴파일하면 js파일에 export{}가 자동으로 나옴

패키지 json에 Es 모듈을 사용하려면 설정

"type": "module",

➡️그래도 ts 노드은 Es모듈을 해석을 못함.

• ts.node는 기본적으로 common,js 사용하기 때문

  "ts-node": {
    "esm": true
  },

• ts가 esm모듈 시스템으로 동작
  

node(js)와 ts-node(ts)

최종 tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    //컴파일 js파일이 저장될 폴더명
    "outDir": "dist",
    // 타입 엄격하게 검사하기
    "strict": true,
    //모듈을 각각 독립적으로 만들어줌
    "moduleDetection": "force"
  },
  // ts 노드은 Es모듈을 해석할 수 있게
  "ts-node": {
    "esm": true
  },
  //"src" 안에있는 파일을 한방에 컴파일해라
  // -> 터미널에 tsc만 입력하면 자동으로 컴파일 완료
  "include": ["src"]
}

최종 package.json

{
  "name": "section1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/node": "^20.10.6",
    "ts-node": "^10.9.2",
    "typescript": "^5.3.3"
  }
}

🧑‍🏫출처 - 한입크기로 잘라먹는 타입스크립트