TypeScript(1) 타입스크립트 설치하기

예전에 리액트로 실습한 영단어 암기장 프로그램이 있다. 그걸 TypeScript로 포팅해보려고 한다.

자 이제 타입스크립트 환경을 세팅해.... 주기 전에 왜 써야하는지 좀 알고가자.

 

Why TypeScript

내가 느낀 타입스크립트를 사용하는 이유는 간단하다. 버그예방

자바스크립트는 int 나 string 같은 타입이 없어 프로젝트가 커지면 햇갈리기 때문이다. 

나 혼자만 코딩하는 거면 괜찮지만, 만약 나 다음사람 다다음 사람이 와서 덕지덕지 유지보수를 한다면?

마치 도배된 벽지들 위에 또 벽지 바르는 것처럼 너덜너덜해질 것이다.  

타입스크립트는 정해준 타입이 아니면 에러를 발생시키기 때문에 통일성이 유지가 된다.

실제로 한 연구에 따르면 모든 자바스크립트 버그의 15%를 사전에 타입스크립트로 감지할 수 있다고 한다.

 

With React

리액트와 타입스크립트의 호환성은 비교적 좋다.

최근 많은 이들이 리액트와 타입스크립트 조합을 선택하고 있다. 리액트 공식 홈페이지에서는 타입스크립트를 사용하기 위한 가이드를 제시하고 있다. 또한 페이스북에서 공식적으로 배포하는 리액트 웹 개발용 보일러 플레이트(Boilerplate, 구조·설정 작업을 자동으로 진행해주는 도구이자 명령어)인 Create React App은 간단한 옵션 추가만으로 타입스크립트를 사용할 수 있도록 지원한다.

 

---

TypeScript(1) 타입스크립트 설치하기

 

- 터미널에 명령어를 입력한다.

npm install typescript @types/node @types/react @types/react-dom @types/jest

 

명령어를 입력하면 뭐가 와장창 나오면서 설치가 된다.

 

- 확장자명 바꾸기 

• .js 형식은 → .ts 로 바꾸기
• .jsx 형식은 → .tsx 파일로 변경 

포팅해야할 디렉토리 구조이다. 이제 파일이름을 하나씩 바꿔가며 포팅해보자

파일 이름만 바꿧다. 그래서 에러 투성이다. 

 

→ 지금 생각해보면 javaScript 와 typeScript 는 어차피 호환이 되기 때문에 한꺼번에 바꾸지말고,

한 파일씩 변경해가며 프로그램이 잘 동작하는지 보는 방향으로 했어야 했다. 

 

여튼 여기까지 잘 설치했다면!!!

이제 본격적으로 타입스크립트로 포팅하러 가보자. 무슨 차이가 있을지 너~모 궁금하다.

 

 

ref: https://www.youtube.com/c/%EC%BD%94%EB%94%A9%EC%95%99%EB%A7%88/playlists

ref: https://www.samsungsds.com/kr/insights/TypeScript.html