TypeScript

ref. Learn Typescript from Scratch - Jatin Sharma

이번 시간에는 이전에 공부한 JavaScript에 정적인 타입을 입힌 TypeScript에 대해 알아보아요!

여러분의 공부를 돕기 위해 준비한 자료들이에요. 따라서 꼭 준비된 자료만 공부할 필요는 없어요! 자신만의 방식으로 공부하고 과제만 잘 수행하면 돼요! 😄

📚 공부할 내용

TypeScript는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어로 정적인 타입을 지원하는 javascript의 superset 이에요. 따라서 새로운 문법을 배울 필요 없이 어떻게 하면 JavaScript에 타입을 입힐 수 있는지를 중점으로 공부하면 돼요!

Node.js & npm & pnpm (optional)

  1. Node.js란 자바스크립트를 실행할 수 있는 환경(런타임)이에요. Node.js를 이용하면 브라우저 외에 터미널과 같은 곳에서도 자바스크립트를 동작시킬 수 있습니다!
  2. 또한 Typescript로 작성한 파일은 브라우저가 이해하지 못하기 때문에 다시 javascript로 변환해야 하는데요, 이 과정에서 tsc 명령어를 사용하면 ts가 js로 변환됩니다. Node.js에 대해 어느 정도 이해했다면 이 tsc를 설치 & 관리하는 npm에 대해서도 공부해 보아요!

코드당 프로젝트에서는 pnpm으로 자바스크립트 패키지를 관리해요! 따라서 기존에 npm을 사용하셨다면 이번에 pnpm을 사용해 보고 놀라운 차이를 느껴보세요!

프로젝트 실습 🎈

이번 주차에는 프로젝트에 있던 javascript 파일에 타입을 입혀보아요!

  • *.js -> *.ts로 바꾸기
  • 패키지 세팅하기
    • npm init
    • npm install typescript --save-dev로 typescript 설치하기
    • tsconfig.json 파일 생성하기
      • strict 옵션을 true로 설정하기 : "compilerOptions": { "strict": true }
      • 나머지 옵션은 본인의 프로젝트 상황에 맞게 설정하기
  • tsc를 사용해서 브라우저에서 동작할 수 있는 javascript 파일로 변환하기 : npx tsc
  • 변환된 js 파일을 브라우저에서 실행해 보기

이번 과제는 정말 간단해요! 따라서 미흡했던 기존 과제들을 다시 보완해 보는 시간을 가져보는 것도 좋을 것 같아요!