1. Visual Studio Code 새 폴더 열기
2. npm init하기
npm init
-> package.json 파일 생김
3. TypeScript 설치
npm install -g typescript
https://www.npmjs.com/package/typescript
4. index.ts 파일 생성 , tsconfig.json 파일 생성
tsconfig.json 에 환경설정 코드 추가
{
"compilerOptions": {
"module":"commonjs", // node.js를 평범하게 사용하고 다양한import /export 가능하게 하는
"target":"ES2015", // 어떤 버젼의 JS 로 컴파일 되고 싶은지 적기
"sourceMap":true, // sourcemap 처리하고 싶은지
},
// 어떤 파일들이 컴파일 과정에 포함되는지 TypeScript에게 알려주기
// include : 컴파일 과정에 포함할 파일의 배열 적기 <-> exclude
"include":["index.ts"],
"exclude":["node_modules"], // default로 해놓으면 편하다.
}
5. index.ts 파일에 코드 임의로 넣고 컴파일 해보기
console.log('hi')
이제 index.ts 를 -----------compile----------> index.js 로 만들기
터미널에 tsc 입력 (Type Script Compiler)
tsc
=> index.js 와 index.js.map 파일이 생긴다
6. tsc 대신 다른 명령어 사용하도록 코드 작성
npm start를 작성하면 매번 컴파일 되도록 작성
"start":"node index.js" -> 이것만 쓰면 아직 컴파일 된 상태가 X -> 컴파일 해줘야함
"prestart":"tsc" 까지 적어주면 npm이 start 할 때 prestart 명령어를 먼저 실행하고 ㄱㄱ함!
{
"name": "typescript_download_settings",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start":"node index.js",
"prestart":"tsc"
},
"author": "",
"license": "ISC"
}
7. 실행하기
npm start
터미널에 npm start를 입력하면 index.ts 가 잘 컴파일되어서 js로 인식하고 return 해준다.
Node.js는 TypeScript를 못 읽음 **** => 꼭 컴파일 해줘야함 !
컴파일 방법은 끝 !
8. 변화가 있을 때마다 자동 컴파일 되도록 만들기 (tsc-watch 사용)
컴파일 할 파일 / 한 파일 정리하기 [ tsc-watch]
1) src, dist 폴더 생성
src : 모든 TypeScript 파일들
dist : 모든 컴파일 된 파일들
npm install tsc-watch --save-dev
2) package.js 수정
{
"name": "typescript_download_settings",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "tsc-watch --onSuccess \" node dist/index.js\" "
},
"author": "",
"license": "ISC",
"devDependencies": {
"tsc-watch": "^4.4.0"
}
}
3) tsconfig.json 수정
{
"compilerOptions": {
"module":"commonjs", // node.js를 평범하게 사용하고 다양한import /export 가능하게 하는
"target":"ES2015", // 어떤 버젼의 JS 로 컴파일 되고 싶은지 적기
"sourceMap":true, // sourcemap 처리하고 싶은지
"outDir":"dist"
},
// 어떤 파일들이 컴파일 과정에 포함되는지 TypeScript에게 알려주기
// include : 컴파일 과정에 포함할 파일의 배열 적기 <-> exclude
"include":["src/**/*"],
"exclude":["node_modules"] // default로 해놓으면 편하다.
}
"outDir" 출력파일 경로
4) index.ts 파일을 src 폴더 안에 넣기
아까 컴파일된 index.js / indes.js.map 은 삭제 !
5) 이제 npm start를 하고 코드 수정을 하면 수정될 때마다 dist의 컴파일된 파일도 실시간으로 수정된다.
타입스크립트 vs 자바스크립트 특징 / 타입스크립트가 편리한 이유
https://blckchainetc.tistory.com/303
'Typescript' 카테고리의 다른 글
[Javascript/Typescript] Promise returned from forEach argument is ignored (0) | 2022.06.16 |
---|---|
[TypeScript + Node.js] 새 프로젝트 시작하기 (환경 설정, nodemon, rimraf) (1) | 2022.04.13 |
package.json 최신 버전으로 업데이트하기 (0) | 2022.02.21 |
TypeScript 타입스크립트 컴파일 과정 (0) | 2021.12.13 |
[TypeScript] interface object 안 objects들 인터페이스, 배열 안 배열의 인터페이스 만들기 (0) | 2021.12.03 |