본문 바로가기
Web Study/TypeScript

타입스크립트 시작하기

by 쿠리의일상 2025. 7. 27.

매번 python flask 만 다루다가 nestjs 를 배워보기 위해 타입스크립트를 배워보려고 한다.

역시 모든 언어의 시작은 개발환경 세팅과 옵션 설정이 아니던가! 차근차근 다루면서 확장해나갈 예정이다.

 

초기 설정

npm init

npm i @types/node // nodejs의 api에 대한 타입 정의 파일

npm i typescript -g // 최초 1회

(X) npm i ts-node -g // TS 파일을 JS 로 즉시 실행해줄 때 사용 (디폴트는 tsc로 컴파일한 후 nodejs로 실행해야 함)
==> 20 버전 이후로는 tsx 사용
npm i tsx -g // 최초 1회

tsc --init // tsconfig.json 파일 생성을 위해

 


tsconfig.json

include

타입스크립트 컴파일러에게 컴파일할 범위를 정해주는 것

 

compilerOptions

compilerOptions - target

JS 버전 설정

특히 compilerOptions 안의 옵션들은 TS->JS 변환 시 필요한 옵션들(타입 검사 등) 설정에 사용됨

예를 들어 target 을 ES5로 설정하면 화살표 함수가 없기 때문에 함수 표현식으로 보여지지만 ESNext (최신버전)으로 설정하면 화살표 함수가 보여질 수 있음

compilerOptions - module

더보기

 JS의 Module 방식

 

1. CommonJS

주로 nodejs 에서 사용되며 require() 함수로 모듈을 불러오고 module.exports나 exports 객체로 모듈을 내보낸다.

모듈을 즉시 불러와 실행하는 동기적 로딩 방식

 

2. ESModule (ESM)

ES6 이후 사용되는 모듈 방식으로 import 문을 사용하여 모듈을 불러오고 export, export default 를 사용하여 모듈을 내보낸다. 트리 셰이킹을 지원하여 비동기적 로딩이 가능하다. 

기본적으로 타입스크립트는 ESM(import/export) 를 이용하여 모듈을 사용할 수 있는데, tsconfig에 CommonJS 로 설정해주면 require 형태로 컴파일 되는 것을 확인할 수 있다.

ESModule 을 사용하기 위해선 ESNext 로 설정해주면 된다.

compilerOptions - outDir

기본적으로 tsc 를 실행하면 .js파일이 .ts 파일과 동일한 곳에 생성된다. 이를 위해 경로를 바꿔줄 필요가 있는데 이때 사용하는 것이 outDir  옵션이다.

compilerOptions - strict

엄격한 타입 검사를 위해 설정하는 것, 타입 추론이 되지 않을 때 오류가 발생하게 됨

compilerOptions - moduleDetection

TS 가 파일들을 모듈로 인식할지 스크립트로 인식할지 결정하는 방식을 설정하는 옵션 기본적으로 모든 ts 파일은 import/export 가 없으면 스크립트로 인식되는데, 이때 동일한 변수명을 다른 파일에 쓰면 에러가 발생한다.

하지만 moduleDetection 옵션을 설정하면 각 파일을 모듈로 인식하게 만들어 파일 간 변수 충돌이 방지되므로 설정해주는 것이 좋다.

  • auto: 기본값으로 위에 설명했듯이 import/export 가 있으면 모듈로, 없으면 스크립트로 간주
  • force: 모든 ts 파일을 모듈로 처리
  • legacy: ts 4.6 이전 방식으로 import/export 로 취급

이때 ESM이냐 CommonJS냐에 따라 import/export, require 등으로 다르게 컴파일 될 수 있다.

complierOptions - skipLibCheck

타입 정의 파일의 타입 검사를 생략하는 옵션으로 라이브러리의 타입 정의 파일에서 오류가 발생할 때 이를 true 로 만들어서 불필요한 타입 정의 파일의 타입 검사를 생략하도록 설정한다. 20버전 이후로 필수로 추가해줘야 한다.

compilerOptions - strictNullChecks

개발 상황에서 당장은 값이 없어서 다른 타입임에도 불구하고 null 을 넣는 경우가 있다. 이때 사용하는 옵션으로 엄격한 null 검사를 false 로 두면 된다.

 

 

'Web Study > TypeScript' 카테고리의 다른 글

리액트와 타입스크립트  (0) 2023.04.30
타입스크립트 필수 문법 정리  (0) 2023.04.25
타입스크립트 기초  (1) 2023.04.20
학원 끝! 타입스크립트 시작!  (0) 2023.04.20