TypeScript 개발 환경구성하기

개발환경 구성하기

---

• Chrome
• Visual Studio Code or WebStorm
• Node.js LTS버전(v10.x이상)
• Git

node 와 npm 설치 확인 !

npm i -D typescript ts-node

다음 명령어를 통하여 타입스크립트 설치

Promise 와 같은 타입을 사용하려면 @types/node 라는 패키지를 설치해야합니다.

npm i -D @types/node

---

index.ts 파일을 만들고 다음과 같이 코드를 작성

const str: string = 'Hello World';

console.log(str);

터미널에서 아래의 명령어를 입력

ts-node index

잘 출력 되었습니다

만약 .js 파일로 컴파일 하고 싶으시다면

tsc index

라고 입력해주시면 index.js 파일로 변한됩니다.

prettier

---

다음으로는 여럿이서 코드를 작성하더라도 한사람이 작성한것 처럼 통일성을 가지기 위해서
prettier 라는걸 사용하겠습니다.

Prettier 셋팅

저는 WebStorm 을 사용하고 있어서 WebStrom 에서 Prettier 설정 하는법을 링크로 남겨 두었습니다.

{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

타입스크립트 설정파일

---

tsc 를 사용하여 ts 파일을 js 파일로 변환 할때 옵션 을 주기 위하여 tsconfig.json 설정 파일을 만들어 줍니다.

tsc --init

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es5",
    "moduleResolution": "node",
    "outDir": "dist",
    "baseUrl": ".",
    "sourceMap": true,
    "downlevelIteration": true,
    "noImplicitAny": false,
    "paths": {
      "*": [
        "node_modules/*"
      ]
    }
  },
  // ./src 와 ./src/utils 디렉터리에 이 프로젝트의 모든 타입스크립트
  // 소스 파일이 있따는 뜻입니다.
  "include": ["src/**/*"]
}

tsc index

를 통해 js 파일로 컴파일 하는 과정에서 다음 과 같은 옵션들로 변환하게 됩니다.

컴파일 옵션들이 궁금하신 분들은 아래 의 링크를 참조하세요.

TypeScript 공식 홈페이지