[TypeScript] 개발환경 구성하기

설치해야 할 것들

Visual Studio Code와 Node.js가 있습니다.

 

Visual Studio Code 설치방법은 아래 링크를 참조하시면 됩니다.

https://seong-jun.tistory.com/entry/Visual-Studio-Code-%EB%8B%A4%EC%9A%B4%EB%B0%A9%EB%B2%95

Visual Studio Code 다운방법

 

Node.js 설치 방법은 아래 링크를 참조하시면 됩니다.

https://seong-jun.tistory.com/entry/Nodejs-%EC%84%A4%EC%B9%98-%EB%B0%A9%EB%B2%95

Node.js 설치 방법

 

VS Code에서 패키지 설치하기

다운로드가 끝나면 작업할 프로젝트 폴더를 생성하고 Visual Sudio Code로 열어주고 터미널에 들어가서 다음과 같이 입력해 줍니다.

npm install -g typescript ts-node

 

-g 옵션은 global 하게 다운로드하면 어디에서든 TypeScript를 사용할 수 있습니다.

 

추가로 패키지 설치 명령 옵션

npm install 옵션	의미	단축명령
--save	프로젝트를 실행할 때 필요한 패키지로 설치. 패키지 정보가 package.json파일의 'devDependencies'항목에 등록됩니다.	-S
--save-dev	프로젝트를 개발할 때만 필요한 패키지로 설치. 패키지 정보가 package.json파일의 'devDependencies'항목에 등록됩니다.	-D

 

위와 같은 옵션으로 설치하는 경우는 이 프로젝트를 전달받아서 사용하는 다른 개발자의 컴퓨터에는 패키지가 전역에 설치되어 있지 않을 경우에 위와 같은 옵션으로 다운로드합니다.

npm install -D typescript ts-node

 

원하는 옵션으로 다운로드하시면 됩니다.

 

추가로 @types/node도 다운로드 해야합니다.

npm install -D @types/node

 

왜냐하면 타입스크립트 컴파일러는 타입이 명시적으로 설정되어 있어야만 코드가 문법에 맞게 작성되었는지를 검증하고 코드를 동작시킵니다. 이 때문에 자바스크립트로 개발된 라이브러리들은 추가로 @types/라이브러리명으로 되어있는 타입 라이브러리들을 제공해야 합니다. 이 라이브러리들은 index.d.ts 파일을 가지고 있고 이 파일을 바탕으로 라이브러리가 제공하는 함수들을 올바르게 사용했는지 검증합니다. 그리고 웹 브라우저나 노드제이에스가 기본으로 제공하는 타입들의 존재도 그냥 알 수 없으므로 @types/node를 다운로드해야 합니다.

 

tsconfig.json 파일 만들기

tsconfig.json 파일은 타입스크립트 컴파일러의 설정 파일입니다.

tsc --init

 

여기까지 터미널에서 입력하면 아래와 같습니다.

 

설치 후 디렉터리 현황

package.json 파일 수정하기

{
  "name": "DoItTs",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "dev": "ts-node src",
    "build": "tsc && node dist"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/chance": "^1.1.6",
    "@types/node": "^20.9.0",
    "@types/ramda": "^0.29.8",
    "ts-node": "^10.9.1",
    "typescript": "^5.2.2"
  },
  "dependencies": {
    "chance": "^1.1.11",
    "ramda": "^0.29.1"
  }
}

 

tsconfig.json 파일 수정하기

{
    // 컴파일러 옵션 지정
    "compilerOptions": {
        "rootDir": "./src",
        "outDir": "./build/js",
        "target": "ES6",
        "noEmitOnError": false,
        "module": "ESNext",

        // ts 컴파일러가 모듈을 찾는 방법 명시
        // - Classic 전략을 사용할 것인지
        // - Node 전략을 사용할 것인지
        "moduleResolution": "Node",

        "esModuleInterop": true,

        // 만약 여기가 비어 있다면
        // target es3면 기본값은 lib.d.ts
        // target es5면 기본값은 dom, es6, scripthost
        // 컴파일할때 사용될 라이브러리들 명시
        "lib": ["ESNext", "DOM"],

        // true: 프로젝트 내에 모든 각각의 소스코드 파일을 모듈로 만들기를 강제함
        // 소스코드 파일에서 import 또는 export를 사용하면 그 파일은 모듈이 되지만
        // 그렇지 않으면 그 파일은 전역 공간으로 정의되고 모듈이 아니기에 에러가 발생
        "isolatedModules": false,

        // ts 소스의 모든 주석을 제거하는것을 설정
        "removeComments": false,

        // js와 ts 파일을 같이 사용할 수 있게 해줌
        "allowJs": false,

        // allowJs와 함께 작동함. checkJs가 활성되면 js파일에 오류가 보고됨.
        // 이는 프로젝트에 포함된 모든 js파일의 맨 위에 // @ts-check를 포함하는 것과 같음
        "checkJs": false,

        // 파일의 이름을 대소문자 판별하게 하는 옵션
        "forceConsistentCasingInFileNames": false,

        // 이 옵션을 true로 하면 TS파일을 js로 컴파일하는 과정에서
        // js파일과 함께 d.ts 선언 파일이 생성되게 됨.
        // 이 선언파일에서 타입들만 따로 관리할 수 있음
        "declaration": false,
        
        "strict": true
    },
    // 컴파일할 개별 파일 목록(확장자 이름 필수)
    "files": [
        "node_modules/library/index.ts"
    ],
    // 컴파일러를 이용해서 변환할 폴더 경로를 지정
    "include": [
        "src/**/*",
        "tests/**/*"
    ],
    // 컴파일러를 이용해서 변환하지 않을 폴더 경로를 지정
    "exclude": [
        "node_modules",
        "dist"
    ],
    // 상속해서 사용할 다른 ts 구성파일 지정
    "extends": "main_config.json"
}

 

이거 외에도 많이 있고 그중에서 원하는 설정값으로 설정하시면 됩니다.

저는 공부를 위해 이렇게 설정했습니다.

{
  "compilerOptions": {
      "rootDir": "src",
      "outDir": "dist",
      "target": "ES5",
      "noEmitOnError": false,
      "module": "CommonJS",
      // 동작 대상 플랫폼이 웹 브라우저인지 nodejs인지를 구분해 그에 맞는 모듈 방식으로 컴파일.
      // 웹 브라우저에서 동작: amd
      // nodejs에서 동작 : commonjs
      // ESNext는 컴파일을 마친 후에 js가 사용하는 모듈 시스템
      "moduleResolution": "Node", // 
      "esModuleInterop": true, // es-module과 commonjs를 호환해 사용할 수 있게 해준다
      "lib": ["ESNext", "DOM"],
      "strict": true, // ts파일의 타입을 엄격하게 사용할 것인지
      "baseUrl": ".", // 현재 디렉터리를 의미
      "downlevelIteration": true, // 반드시 true로 해야지 생성기 구문이 정상 작동한다
      "noImplicitAny": false,
      "sourceMap": true, // 변환된 js코드가 ts코드의 어디부분에 해당하는지 알려준다
      "paths": {"*":["node_modules/*"]}
  },
  "include": [
      "src/**/*"
  ]
}

 

다운로드와 설정이 끝나면 src폴더와 dist폴더를 생성해야 합니다. 만약 다른 이름으로 tsconfig의 rootDir와 outDir를 설정하셨다면 그 이름으로 만드시면 됩니다.