노드JS 타입스크립트(2) 작성

2 minute read

타입스크립트 개요

타입스크립트를 과정(기본조건)

TypeScript (.ts) 파일을 사용하기 위해서는 다음의 기본 조건들이 필요하다.

Node.js와 TypeScript 설치

TypeScript는 Node.js 환경에서 실행되며, 따라서 Node.js와 TypeScript를 설치해야 한다.
TypeScript 설정 파일(tsconfig.json)

TypeScript 컴파일러는 tsconfig.json이라는 설정 파일을 사용하여 컴파일 옵션을 구성한다. 이 설정 파일은 프로젝트 루트 디렉토리에 위치하며, 필요한 컴파일 옵션들을 지정해야 한다.
TypeScript 파일 작성

TypeScript는 JavaScript의 슈퍼셋이므로, JavaScript와 동일한 문법을 사용할 수 있다. 더불어 TypeScript의 고급 기능들인 정적 타입 검사, 인터페이스, 데코레이터 등을 활용하여 TypeScript 파일을 작성해야 한다.
TypeScript 컴파일

작성한 TypeScript 파일을 JavaScript 파일로 변환하기 위해 TypeScript 컴파일러를 사용해야 한다. tsconfig.json 파일에서 지정한 컴파일 옵션들에 따라 TypeScript 파일을 컴파일하여 JavaScript 파일을 생성할 수 있다.
JavaScript 실행

컴파일된 JavaScript 파일을 실행하여 TypeScript의 고급 기능들이 반영된 코드를 실행할 수 있다. JavaScript 파일은 일반적인 방식으로 실행하면 된다. (예를 들어, Node.js 환경에서는 node 명령어를 사용하여 JavaScript 파일을 실행할 수 있다.)

위의 기본 조건들을 충족시키면 .ts 파일을 사용할 수 있게 된다.

STEP1. TypeScript 설치

# 일반적으로 TypeScript를 프로젝트마다 로컬로 설치하는 것이 권장 된다. 
# 이는 프로젝트 내에서 TypeScript의 버전을 관리하고, 
# 프로젝트 별로 다양한 TypeScript 버전을 사용할 수 있는 유연성을 제공하기 위함이다.
npm install typescript 

# package.json
"dependencies": {
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "mysql2": "^3.2.0",
    "typescript": "^5.0.4" # 추가되어짐
  }

STEP2. TypeScript 설정 파일(tsconfig.json)

: tsconfig.json 파일을 조정하여 컴파일 옵션을 세밀하게 제어가능하다. TypeScript 프로젝트를 컴파일할 때, 해당 설정에 따라 TypeScript 컴파일러가 동작한다.

tsconfig.json 을 만들지 않은 경우 예시

// 설정 파일이 없을때 디폴트 값을 표현하자면 아래와 같다.
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": false,
    // 기타 필요한 설정 옵션들
  },
  // 다른 설정 옵션들
}

tsconfig.json 작성

{
  "compilerOptions": {
    "jsx": "react-jsx",  // JSX 문법 React 컴포넌트 작성가능 
    "target": "es6",     // 컴파일된 JavaScript의 목표 버전 
    "module": "esnext",  // 동적으로 최신 ECMAScript 로딩
    "moduleResolution": "node",  // 컴파일러 모듈해석 방식
    "sourceMap": true,   // 소스맵파일 생성되어 디버깅 유리
 
    "emitDecoratorMetadata": true, // TypeScript 컴파일러는 클래스의 데코레이터에 대한 추가 메타데이터를 생성하여 런타임에서 사용 가능해짐
    "experimentalDecorators": true, // TypeScript에서 데코레이터를 사용할 수 있게된다.
    "removeComments": false, // false: 컴파일된 JavaScript 코드에서 주석을 제거하지 않고 그대로 유지한다.(기본값 true)
    "noImplicitAny": false,  // true: 암묵적으로 "any" 타입으로 추론되는 경우에 컴파일 강제에러 발생

    "supperessImplicitAnyIndexErrors": true, //true: 인덱스로 접근하는 경우에 any 타입으로 추론되는 경우에도 컴파일 에러가 발생하지 않게된다.

    "outDir": "./target/classes/static/app", // 컴파일폴더
    "lib": [             // 라이브러리 추가 폴더
      "dom",
      "es2015", 
      "es2016", 
      "es2017"
    ],
    "allowJs": true, 
    "checkJs": true, 
    "baseUrl": "./src",  // 상대경로

    "importHelpers": true,   // ES, CommonJS 모듈 간 상호개선
    "esModuleInterop": true,  
    "allowSyntheticDefaultImports": true, 
    "skipLibCheck": true, 
    "forceConsistentCasingInFileNames": true, 
    "noFallthroughCasesInSwitch": true, 
    "resolveJsonModule": true, 
    "isolatedModules": true, 
    "noEmit: true, 
    "strict": true
  },
  "include": ["src"],
  "exclude": [
    "node_modules", 
    "./target/classes/static/app"
    //"dist"
    //"build"
  ]
}

STEP3. TypeScript 파일 작성

test-typescript.ts

// TypeScript는 JavaScript의 상위 집합 언어(슈퍼셋)이므로, JavaScript 코드를 TypeScript 파일에 그대로 작성할 수 있다.

STEP4. TypeScript 컴파일

# .ts 파일이 JavaScript 파일로 컴파일되어 생성된다.
tsc <파일이름>.ts

STEP5. JavaScript 실행

node <파일이름>.js

Share on

Twitter Facebook LinkedIn