0songha0

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

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”을 지정하면 됩니다.
ES 모듈 시스템을 사용하는 Javascript 파일을 node.js로 실행하기 위해 필요한 설정입니다.

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 됨
    "strictNullChecks": false,

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

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

    // 타입스크립트 폴더 내 js 파일 생성 허용
    "allowJs": true,

    // 암시적 any 타입 추론 허용
    // 타입 생략해도 컴파일 오류 없음
    "noImplicitAny": false,

    // 기본 내보내기 없는 js import 허용
    "esModuleInterop": true,

    // React 17 이상에서 JSX 사용
    "jsx": "react-jsx"
  },

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

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

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

tsc

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

최신 글