타입스크립트 기본 설치와 초기 세팅
일반적인 타입스크립트 환경에서 작업하기 위한 초기 세팅에 대해 정리해보고자 한다. (리액트 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
'Program > TypeScript' 카테고리의 다른 글
| vscode 에서 .ts 파일을 바로 실행/디버그 (0) | 2023.05.17 |
|---|
