TypeScript) Project 생성 및 설정하기

송민경's avatar
Sep 13, 2024
TypeScript) Project 생성 및 설정하기

1. 프로젝트 폴더를 만들고 그 내부로 이동하기

 

2. Node.js 프로젝트로 만들기

npm init -y
notion image
notion image
 

3. TypeScript를 devDependencies에 설치하기

npm install -D typescript
notion image
 
notion image
 

4. src 폴더 만들기

  • 내부에 index.ts 만들기
notion image
const hello = () => "hi";
 

5. tsconfig.json 파일 만들기

  • VS Code가 우리가 TS로 작업하는 것을 알고 자동완성 기능을 제공해줌
notion image
  • 터미널에서 명령어 입력하기
touch tsconfig.json
npm i -g typescript tsc --init
notion image
notion image
  • 마우스 우클릭해서 만들기
notion image
  • 설정하기
//TS 파일 위치 알려주기 { "include": ["src"], // src의 모든 파일 확인하기 "compilerOptions": { "outDir": "build" // JS 파일이 생설될 폴더 지정 } }
  • package.json에 scripts 수정하기
{ "name": "typechain", "version": "1.0.0", "scripts": { "build": "tsc" }, "keywords": [], "author": "", "license": "ISC", "description": "", "devDependencies": { "typescript": "^5.6.2" } }
  • 실행하기
npm run build
notion image
 
notion image
  • build 폴더 내의 index.js 파일 확인하기
  • TS의 파일이 JS로 변환되어있음
    • TS 파일
    • const hello = () => "hi";
    • JS 파일
      • TS가 자신의 코드를 컴파일해서 낮은 버전의 JS로 바꿔준 것
        • notion image
           
 
Share article

vosw1