개발새발개발/TypeScript

[Typescript] 타입스크립트 설치 및 시작, tsnode, TSX, 타입스크립트 컴파일러 설정

birdsfoot 2025. 2. 9.

 

타입스크립트

 

- 정적 타입 시스템과 동적 타입 시스템의 단점을 보완한 점진적 타입 시스템

 

 

 

 

타입스크립트 시작하기(폴더 바꿀때마다 해줌)

 

1. npm init 

- node.js 패키지 초기화

 

 

2. npm i @types/node

- 타입스크립트 설치 

 

 

3.  npm install typescript -g

- 타입스크립트 컴파일러 설치

- `-g` 로 전역 설치

- `tsc -v`으로 5. 버전인지 확인

 

 

 

 

 

타입스크립트 실행

1. src/index.ts

- 타입스크립트의 확장자 ts

 

 

2. 코드 입력

console.log("hello")
const a : number = 1

 

 

3. $`tsc src/index.ts`

- 실행 명령어 입력

- index.js가 생김

 

 

 

4. 코드 실행

`$ node src/index.js`

=> 'hello'가 터미널에 출력됨

 

 

 

 

TSX(TypeScript Execute)로 실행하기

1. 설치

`npm i -g tsx`

 

 

2. 설치 확인

`tsx -v`

 

 

3. 실행

`tsx src/index.ts`

 

 

 

 

ts-node를 이용해 바로 실행하기 

- ts-node는 Node20버전 이후 사라짐

1. 설치

`npm install ts -node -g`

 

2. 실행

`tsx src/index.ts`

`ts-node src/index.ts`

- js로 파일 생성 없이 바로 실행해줌

 

 

 

타입스크립트 컴파일러 옵션 설정하기 

 

1. tsc 초기화

`tsc -- init`

 

2. tsconfig.json

- 파일 내용 모두 지우고 중괄호 { } 입력해두기

 

 

3. 코드 입력

{
  // 상세한 옵션 설정은 이 안에서 설정함
  "compilerOptions": {
    "target": "ESNext",  // js의 버전을 정함 // ESNext : 최신버전
    "module": "ESNext",  // 모듈 타입 설정
    "outDir": "dist",    // 컴파일로 생긴 js파일을 저장할 폴더
    "strict": true,      // 엄격한 코드 검사 시행
    "moduleDetection" : "force",  // 파일끼리 변수명이 겹칠 수 있도록 전역 모듈 모드를 바꿔줌
    "skipLibCheck": true,  // 타입 정의 파일(ts)의 불필요한 타입 검사를 생략하여 라이브러리 파일에서 오류가 발생하는 것 방지
    "strictNullChecks": false,
  },
  // 특정 폴더 안에 있는 파일들을 따로 경로를 입력하지 않아도 컴파일하도록 함함
  "include": ["src"] 
}

 

 

 

strict 설정

- 오류 방지를 위해 보다 엄격한 검사를 시행함

 

- 매개변수 타입은 예측 못하기 때문에 strict 모드 켰을 때 오류가 발생함(끄면 에러 X)

 

 

 

 

 

moduleDetection

- 타입스크립트는 모든 파일을 전역 모듈로 보기 때문에 같은 변수명을 파일이 다르더라도 사용하지 못함

 

 

해결방법

1. `export` / `import` 같은 모듈 키워드를 파일 내 한번이라 사용하면 독립된 모듈로 봄

2.  옵션 설정하기 (moduleDetection)

- `export { }` 코드를 자동으로 추가해줌

- 옵션 설정 후 안된다면 `컨트롤+쉬프트+P` 누른 뒤 `restart` 검색해서 Ts server 재시작하면 됨

 

 

 

댓글