
1. 프로젝트 폴더를 만들고 그 내부로 이동하기
2. Node.js 프로젝트로 만들기
npm init -y


3. TypeScript를 devDependencies에 설치하기
npm install -D typescript


4. src 폴더 만들기
- 내부에 index.ts 만들기

const hello = () => "hi";
5. tsconfig.json 파일 만들기
- VS Code가 우리가 TS로 작업하는 것을 알고 자동완성 기능을 제공해줌

- 터미널에서 명령어 입력하기
touch tsconfig.json
npm i -g typescript tsc --init


- 마우스 우클릭해서 만들기

- 설정하기
//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


- build 폴더 내의 index.js 파일 확인하기
- TS의 파일이 JS로 변환되어있음
- TS 파일
const hello = () => "hi";
- TS가 자신의 코드를 컴파일해서 낮은 버전의 JS로 바꿔준 것

Share article