1주차 - 계산기

TypeScript와의 첫만남

JavaScript로 가벼운 계산기를 만들었습니다. 잘 작동하는지 한번 테스트를 해볼까요?

1 + 1은 우리가 기대하는대로 2가 나올까요?

npm i
npm start

아니라면 왜 그럴까요? 원인을 찾았다면 이제 JS코드를 TypeScript로 바꿔보며 TS의 장점을 만나볼까요?

JS 코드를 TS 코드로 변환해보기

루트 디렉토리에 tsconfig.json 파일을 추가했습니다.

tsconfig.json은 TSC(TypeScript Compiler)가 사용하는 설정파일입니다.

{
  "include": ["./src/**/*"],
  "compilerOptions": {
    "strict": true,
    "esModuleInterop": true,
    "lib": ["dom", "es2015"],
    "jsx": "react-jsx"
  }
}

src 디렉토리 내 모든 js, jsx 파일의 확장자를 ts, tsx 파일로 바꿔줍니다.

App.tsx
index.tsx
util.ts

npm start

브라우저에 다음 에러 화면이 뜨는건 TSC가 코드의 오류를 검출한 것들입니다. 이제 오류를 잡아봅시다.

TSC가 검출한 오류를 다 고쳤다면 에러 화면이 없어질 것입니다.

이제 다시 계산기를 실행해볼까요?

1 + 1은 2가 나오나요?

타입스크립트가 검출한 오류를 통해 우리가 의도한대로 작성이 안됐음을 인지할 수 있었고 그로 인해 올바른 코드를 작성할 수 있었습니다.

타입스크립트 넘 좋네요. 🥹