Typescript 초기 세팅

Typescript 초기 세팅

1. npm, node 설치 및 버전 확인

npm -v
node -v

2. package.json 생성하기

npm init

3. Typescript 설치

이 패키지는 .ts 파일을 .js 파일로 변환하는 컴파일러를 제공한다.
< package.json 의 dependencies에 포함된다. >

npm install typescript

4. ts-node 설치

.ts파일을 .js 파일로 컴파일하여 node에서 실행할 수 있게 해준다. (타입스크립트를 바로 실행)
< -D 옵션으로 인해 package.json>Devdependencies 에 포함된다 >

npm install -D ts-node

5. tsconfig.json 파일 생성, 세부옵션 설정 하기

npx tsc --init 	<- tsconfig.js 생성 명령어

[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"]
}

[속성 부가설명]

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

6. package.json에서 build 설정 하기

npm run build 시 컴파일된다.

[package.json]

{
  "dependencies": {
    "typescript": "^5.1.6"
  },
  "devDependencies": {
    "ts-node": "^10.9.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc --build",
    "clean": "tsc --build --clean"
  }
}

7. src 폴더 생성 후, .ts 파일을 생성하고 build를 하자

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

npm run build

[컴파일 전 폴더 트리]

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

[컴파일 후 폴더 트리]

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

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

---

자료 출처 😊
타입스크립트 기본 설치와 초기 세팅
타입스크립트 컴파일 설정