0songha0

TypeScript 개념 정리 / 타입스크립트 설치 및 컴파일 옵션 설정 방법

TypeScript란?

Javascript를 안전하게 사용할 수 있도록 타입 관련 기능들을 추가한 확장 언어입니다.

타입스크립트 코드는 컴파일 시 타입 검사를 성공하면 Javascript로 변환됩니다.
컴파일 된 Javascript에는 타입 관련 코드들이 포함되지 않아 성능에 영향을 주지 않습니다.
코드 실행 전 타입 오류를 미리 발견하므로 일반 Javascript보다 안정성이 높습니다.

언어별 타입 시스템 차이

정적 타입 시스템 C, Java 코드 실행 전 컴파일 타임에 모든 변수 타입을 고정
컴파일 시 타입 검사 수행 및 오류 검출로 안정성 높음
변수 선언 시 타입 명시 필수
동적 타입 시스템 JavaScript, Python 코드 실행 중 런타임에 변수 타입을 유동적으로 결정
타입 오류를 미리 검사할 수 없어 예기치 못한 오류 발생 가능
변수 선언 시 타입 명시 불필요
점진적 타입 시스템 TypeScript 타입을 명시한 변수는 변수 타입을 고정
타입이 명시되지 않은 변수는 타입 추론을 통해 검사 수행

타입스크립트 설치 및 실행 방법

Node.js 패키지 초기화

npm init

타입스크립트 폴더 생성 후 Node.js 패키지 초기화 명령어를 실행합니다.
-y 옵션 또는 엔터로 기본값을 설정할 수 있습니다.
패키지가 초기화되면 package.json 파일이 생성됩니다.

Node.js 내장 모듈 타입 정보 제공 npm 라이브러리 설치

npm install @types/node --save-dev

fs, path, process 같은 Node.js 내장 모듈 사용 시 타입 검사에 필요한 라이브러리를 추가합니다.
라이브러리 설치 시 package.json 파일 devDependencies에 의존성이 추가됩니다.
node_modules 폴더에도 라이브러리 폴더 및 파일들이 설치됩니다.

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

npm install typescript --save-dev

-g 옵션으로 전역 설치도 가능하지만, 버전 충돌 위험이 있어 프로젝트에만 설치하는 것이 권장됩니다.

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

tsc -v

타입스크립트 컴파일러 버전이 나오면 정상 설치된 것입니다.

타입스크립트 파일 컴파일 명령어

tsc src/타입스크립트파일명.ts

코드 검사를 통과하면, 현재 폴더에 컴파일 된 Javascript 파일이 생성됩니다.

컴파일 된 Javascript 실행 방법

node src/자바스크립트파일명.js

타입스크립트를 컴파일하여 생성된 Javascript 파일을 node로 실행할 수 있습니다.

타입스크립트 실행 시 에러메세지

(node:11830) Warning: To load an ES module, Set "type": "module" in the pacage.json or use the .mjs extension.

위와 같은 오류가 나오는 경우, package.json에 “type”: “module”을 지정하면 됩니다.
node.js로 ES 모듈 시스템을 사용하는 Javascript 파일을 실행하기 위해 필요한 설정입니다.

tsx 라이브러리 설치

npm install tsx --save-dev

타입스크립트 컴파일 및 실행을 동시에 할 수 있는 라이브러리를 설치합니다.
tsx는 기존 ts-node 라이브러리 대체재로 떠오르고 있습니다.

타입스크립트 컴파일 및 실행

tsx src/타입스크립트파일명.ts

tsx를 통해 타입스크립트 파일 컴파일 및 실행을 동시에 합니다.
위 명령어 사용 시, 별도의 js 파일은 생성되지 않습니다.

타입스크립트 옵션 설정

TypeScript 파일을 JavaScript 파일로 컴파일할 때 사용되는 컴파일러 옵션을 설정합니다.
타입 오류 검사 규칙, JavaScript 버전, 경로 매핑 등을 지정할 수 있습니다.

타입스크립트 컴파일러 옵션 설정 파일 생성

tsc --init

현재 프로젝트 폴더에 기본 설정이 담긴 tsconfig.json 파일을 생성합니다.

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

{
  "compilerOptions": {
    // 컴파일 결과 JavaScript 코드 버전 설정
    "target": "ES6 또는 ESNext (최신버전)",

    // 컴파일 결과 JavaScript 코드 모듈 시스템 설정 
    "module": "CommonJS 또는 ESNext (ES 모듈 시스템)",

    // 컴파일 결과 JavaScript 파일들이 생성될 폴더명 설정
    "outDir": "dist",

    // 엄격한 타입 오류 검사 모드 설정
    // 타입 추론이 되지 않는 매개변수 오류 표시
    "strict": true,

    // 엄격한 null 검사 여부 설정
    // false : 타입 변수에 null 할당 허용
    // strict 옵션의 하위 옵션이므로, strict false 설정 시 strictNullCheckes도 false 됨
    "strictNullCheckes": false,

    // 외부 라이브러리 타입 정의 파일 (.d.ts 파일) 타입 검사 생략
    // undici-types 관련 오류 방지
    "skipLibCheck": true,

    // 각 타입스크립트 파일을 독립된 모듈로 인식하는 기준 설정
    "moduleDetection": "force"
    // auto (기본값) : import / export 코드가 있어야 모듈로 인식
    // force : 모든 .ts 파일을 개별 모듈로 인식 (컴파일 결과 .js 하단에 export {}; 강제 삽입)
  },

  // src 폴더 내 모든 파일 컴파일
  "include": ["src"]
}

tsconfig.json 파일에 타입스크립트 컴파일 옵션을 정의할 수 있습니다.

타입스크립트 컴파일 명령어

tsc

tsconfig.json 파일에 include 속성에 src 폴더를 지정했기 때문에,
파일명을 입력하지 않아도 src 폴더 내 모든 타입스크립트 파일들이 컴파일됩니다.

최신 글