타입스크립트 기본 설치와 초기 세팅

일반적인 타입스크립트 환경에서 작업하기 위한 초기 세팅에 대해 정리해보고자 한다. (리액트 X)

타입스크립트 설치와 세팅

1. node, npm 설치되어 있는지 확인한다.

node -v
npm -v

2. 프로젝트 폴더에서 npm init으로 package.json을 생성한다.

npm init

3. 타입스크립트 설치

이 패키지는 ts를 js로 변경하는 컴파일러를 제공한다.

npm install typescript

4. ts-node 설치

ts 파일을 js로 컴파일해서 node에서 실행해준다.
즉, 타입스크립트를 바로 실행할 수 있게 해주는 것이다.

npm install -D ts-node

5. 아래 명령어를 통해 tsconfig.json 파일을 생성하여 컴파일 세부 옵션을 설정해준다.

npx tsc --init

📎 컴파일러 옵션
📎 타입스크립트 설정 파일 (tsconfig.json)

(tsconfig.json 예시)

{
 "compilerOptions": {
   "target": "es5",
   "lib": [
     "dom",
     "dom.iterable",
     "esnext"
   ],
   "allowJs": true,
   "skipLibCheck": true,
   "allowSyntheticDefaultImports": true,
   "strict": true,
   "forceConsistentCasingInFileNames": true,
   "noFallthroughCasesInSwitch": true,
   "module": "commonjs",
   "outDir": "dist",
   "rootDir": "src",
 },
 "include": [
   "src/**/*"
 ],
 "exclude": [
   "node_modules"
 ]
}

• strict: 타입 검사를 엄격하게 한다. false로 하면 타입스크립트를 사용하는 의미가 없다.
• include: ts 파일을 js로 컴파일할 폴더 지정
• exclude: js 컴파일 제외 폴더 지정
• target: 컴파일 js 버전. 보통 es5를 기준으로 한다.
• lib: 컴파일할 때 포함될 라이브러리 목록
• module: js 파일 간에 import 시 어떤 문법을 사용할지 지정한다. (commonjs는 require 문법, es2015와 esnext는 import 문법)
• outDir: 컴파일된 js가 생성되는 경로
• roodDir: 시작 경로
• allowJs: ts 파일을 컴파일할 때 js 파일도 포함할지 설정. 기존 자바스크립트 프로젝트에서 타입스크립트로 적용할 때 유용하다.
• esModuleInterop: export default가 없는 라이브러리도 * as 없이 불러올 수 있다.

6. package.json에서 build 설정을 해준다.

(package.json)

{
  "name": "client",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc --build", // npm run build 시 컴파일된다.
  	"clean": "tsc --build --clean" // build 지우기
  },
  "author": "cw",
  "license": "ISC",
  "dependencies": {
    "typescript": "^4.5.5"
  },
  "devDependencies": {
    "ts-node": "^10.5.0"
  }
}

7. src 폴더에 테스트용 ts 파일 생성 후, 컴파일 해본다.

package.json에서 build 시 타입스크립트가 컴파일 되도록 설정했기 때문에 build 명령어를 입력하면 된다.

build 명령어
npm run build

(컴파일 전 폴더 경로 예시)

client
├── package-lock.json
├── package.json
├── src
│   └── test.ts
└── tsconfig.json

tsc는 typescript compiler의 약자다. tsc를 실행하면 아래와 같이 dist 폴더와 컴파일된 js 파일이 생성된다.
위에서 "outDir": "dist"로 컴파일 설정을 해두었기 때문에 dist 폴더(배포 폴더)가 아웃풋 경로로 지정된 것이다.

(컴파일 후 폴더 경로 예시)

client
├── dist
│   └── test.js
├── package-lock.json
├── package.json
├── src
│   └── test.ts
└── tsconfig.json

build한 파일을 모두 지우고 싶다면, 아래 명령어를 입력한다.

npm run clean

---

📎 TypeScript 코드 컴파일(Node.js)