[TypeScript] 초기 세팅, 환경 설정

알아둬야하긴 하지만 자주 사용하지는 않을 것이다. nestJS, nextJS, CRA를 사용하는 대부분의 사람들은 수동으로 타입스크립트 프로젝트를 만들 일이 거의 없다. 이런 프레임워크랑 라이ㅡ러리, 패키지들이 우리를 위해 타입스크립트 프로젝트를 만들어 준다. 

타입스크립트의 구성에 대한 인사이트를 제공. 

 

- npm init -y

- package.json 아래와 같이 수정

아래 name은 제가 만든 파일 명입니다. 

{
  "name": "typescript-chain",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "build": "tsc"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^4.7.4"
  }
}

- npm install -D typescript

- src 폴더 생성 후 index.ts 파일 만듦, 자바스크립트로 컴파일 해줄 tsconfig.json 파일 만듦. 이 파일이 있으면 vs code는 우리가 타입스크립트로 작업한다는 것을 즉시 알게되고, 자동완성 기능을 제공해준다. 

- npm run build를 하면 tsc 작동. 

아래와 같이 build 폴더가 만들어진 것을 확인할 수 있다. 

- tsconfig.json

{
  //include 안에는 우리가 js로 컴파일하고 싶은 모든 디렉토리 넣어줌
  "include": ["src"],
  "compilerOptions": {
    // 자바스크립트 파일이 생성될 디렉토리
    "outDir": "build",
    // 어떤 버전의 js로 바꿀 것인지
    "target": "ES6",
    "lib": ["ES6", "DOM"]
  }
}

타입 정의는 몇몇 자바스크립트 코드와 api의 타입을 설명할 수 있도록 해준다. 하지만 스스로 타입 정의 파일을 써야 하는 일은 많지 않을 것이다. 

npm i -D ts-node로 빌드없이 타입스크립트 실행 가능. 개발환경에서만 사용. 

npm i nodemon 을 설치하면 자동으로 커맨드를 재실행해줘서 일일이 커맨드를 다시 실행할 필요가 없어진다.