frontend/TypeScript

TypeScript 개발환경 설정 복습

findTheValue 2021. 6. 2. 01:39
npm install -g yarn

- yarn 설치

init yarn

- init yarn 하면 package.json생김 ( 이미 github레포지토리와 로컬 레포지토리 연결시켜놓은 상태)

sudo yarn global add typescript

-yarn or npm으로 TS설치 (관리자권한으로 설치안하면 컴파일 안될수도 있음)

 

-tsconfig.json생성

 

-package.json과 tsconfig.json에 컴파일 scripts와 경로, 포함, 미포함 파일 설정. js파일은 따로 생성 되도록 폴더를 만들어준다, 컴파일시 생성되는js파일도 읽어줄 수 있도록 경로를 설정해준다.

(ts파일을 컴파일하면 js와 js.map파일이 자동으로 생겨난다.)(ts와 js의 구조차이를 realtime으로 볼 수 있다)

(js파일을 컴파일 하는 이유는 node가 JS만 이해하고 TS는 읽지 못하기 때문.

 

++ts파일은 마지막 문단에 export {}를 붙혀야 모듈화 되어 정상적인 동작을 수행한다.

 

yarn start

컴파일 수행 명령어.

npm start와 마찬가지

 

yarn add tsc-watch --dev

- tsc-watch 패키지를 다운로드한다.

(코드가 바뀔 때마다 ts -> js -> node로 실행하던 컴파일 과정을 수정시마다 자동으로 진행하게 해준다.)

(TS버전 nodemon)

(package.json에 "start": "tsc-watch --onSuccess \" node {index.js경로} \" " 추가)

(tsconfig에 "outDir":{컴파일된 js파일이 모일 경로}, "indlude":["src/**/*"] (ts파일이 존재하는 모든경로))

yarn add crypto-js

-crypto-js 라이브러리 : AES(Advanced Encryption Standard) 암복호화를 위한 라이브러리

 

 

 

'frontend > TypeScript' 카테고리의 다른 글

tsc:command not found  (0) 2021.06.01