320x100
320x100
1. types 패키지 설치
- npm
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
- yarn
yarn add typescript @types/node @types/react @types/react-dom @types/jest
2. package.json 확인
: @types ~ 로 시작하는 타입스크립트 관련 라이브러리 설치 여부 확인
// "dependencies"
"@types/jest": "^29.5.8",
"@types/node": "^20.9.2",
"@types/react": "^18.2.37",
"@types/react-dom": "^18.2.15",
"typescript": "^5.2.2",
3. tsconfig 추가
npx tsc --init
: 실행 후 tsconfig.json 파일 확인
4. 주요 파일들 이름을 ts로 변경 (깃 히스토리 손실 없이 변환)
- VSCode에서 터미널을 git bash로 실행 후 아래 명령어 입력
ls ./src/**/*.js |
while read line; do git mv -- $line ${line%.js}.ts; done;
: src/app.js가 있다면 ls 뒤에 경로에서 **/제거
NodeJS 타입스크립트 설정
1) ts-node 설치
npm install -g ts-node
2) 실행
ts-node ./app.ts
Reference
JS프로젝트를 TS로 리팩토링하기
이전에 React와 Javascript로 제작했던 자기소개 사이트 개인 프로젝트가 있었는데, 내용 업데이트도 해야하고, 요새 TypeScript를 공부하고 있다보니 연습도 해볼 겸 이를 적용해서 바꾸고 싶었다.
velog.io
Convert a react app from flow to typescript without losing git history
start with creating a new branch git checkout -b "moving-from-flow-to-ts" R...
dev.to
300x250
728x90
'Programming > TypeScript' 카테고리의 다른 글
타입스크립트 클린코드 (0) | 2023.12.28 |
---|---|
nodejs / typescript / express API 문서 자동화 도입기 (실패) (0) | 2023.12.28 |
타입스크립트 알차게 활용하기 (0) | 2023.11.07 |
타입스크립트 제네릭 (0) | 2023.11.07 |
type과 interface, union의 차이점 (0) | 2023.11.07 |