🧹 개요
타입스크립트를 최근 배워 개인프로젝트에 적용해보면서, 뭔가 되기는 하는데 잘 모르고 있다는 느낌을 많이 받았다. TypeScript Handbook를 읽어보기는 했지만 빠르게 중반까지만 읽어서 큰 도움이 되지는 않은 것 같다.
그래서 좀 더 깊게 알고 싶던 찰나에 '타입스크립트 프로그래밍'이라는 좋은 책을 선물받아 읽어보기로 했다.
목표는 일주일에 100페이지씩 읽기!
오늘은 1장, 2장을 읽어보았다.
1장: 소개
2장: 타입스크립트: 3,000미터 상공에서 내려다보기
- 컴파일러
- 타입시스템
- 코드 편집기 설정
- index.ts
- 연습문제
✨ 내용
🌊 타입스크립트를 쓰는 이유
- 개발자의 실수 방지
- 자바스크립트는 실수를 저지른 시점과 그 실수를 처음 인지하는 시점이 달라지기 쉬움
- 타입스크립트는 코드를 입력하는 순간 에디터에서 바로 에러 메시지를 받아볼 수 있음
- 자신과 미래의 개발자에게 문서화 제공
- 리팩토링 쉽게 만듦
- 단위 테스트의 숫자를 반으로 줄임
👉👉 타입 안정성을 지키는 프로그램을 구현할 수 있게 함
👉👉 프로그래머의 생산성을 늘려줌
🌊 컴파일 과정
- (TSC) 타입스크립트 소스 ---> 타입스크립트 AST
- (TSC) 타입 검사기가 AST를 확인(이때 타입 검사)
- (TSC) 타입스크립트 AST ---> 자바스크립트 소스
- (자바스크립트 런타임) 자바스크립트 소스 ---> 자바스크립트 AST
- (자바스크립트 런타임) AST ---> 바이트코드
- (자바스크립트 런타임) 런타임이 바이트코드를 평가
- 과정 1, 2에서는 타입을 사용함
- 과정 3부터는 타입을 사용하지 않음: 개발자가 코드에 기입한 타입 정보는 최종적으로 만들어지는 프로그램에 아무런 영향을 주지 않으며 단지 타입을 확인하는 데만 쓰인다.
AST란?
추상 문법 트리(abstract syntax tree, AST)로, 컴파일러에서 널리 사용되는 자료구조이다. 컴파일러가 요구하는 프로그램의 단계 중 중간 표현 역할을 하며 컴파일러으 최종 결과물에 대해 강력한 영향을 준다.
🌊 타입 시스템
타입 시스템이랑 타입 검사기가 프로그램에 타입을 할당하는 데 사용하는 규칙 집합이다.
타입 시스템은 보통 두 가지 종류가 있다고 한다. 그리고 타입스크립트는 두 시스템 모두의 영향을 받았다.
1. 어떤 타입을 사용하는지를 컴파일러에 명시적으로 알려주는 타입 시스템 ---> 개발자는 어노테이션(value: type 형태)을 이용하여 타입스크립트에 명시적으로 타입을 지정할 수 있다.
2. 자동으로 타입을 추론하는 타입 시스템 ---> 타입스크립트는 따로 지정하지 않아도 추론도 한다.
나머지는 타입스크립트의 추론에 맡기고 꼭 필요한 때에만 어노테이션을 사용하자.
🌊 타입스크립트vs.자바스크립트
| 타입 시스템 기능 | 자바스크립트 | 타입스크립트 |
|---|---|---|
| 타입 결정 방식 | 동적 | 정적 |
| 타입이 자동으로 변환되는가? | O | X(대부분) |
| 언제 타입을 확인하는가? | 런타임 | 컴파일타임 |
| 언제 에러를 검출하는가? | 런타임(대부분) | 컴파일 타임(대부분) |
- 자바스크립트는 런타임에 예외를 던지거나 암묵적 형변환을 수행한다.
- 타입스크립트는 컴파일 타임에 문법 에러와 타입 관련 에러를 모두 검출한다.
🔮 연습 문제
코드 편집기로 아래의 코드를 입력하고 마우스 커서를 올려보면서 타입을 어떻게 추론하는지 확인하기
let a = 1 + 2
let b = a + 3
let c = {
apple: a,
banana: b
}
let d = c.apple * 4코드 편집기 대신 TypeScript Playground에서 실습을 해보았다. 아래 캡쳐에서 왼쪽 코드는 타입스크립트, 오른쪽 코드는 변환된 자바스크립트이다.
a-d 모든 변수가 number 타입으로 추론됨을 알 수 있었다.
그리고 숫자 대신 문자열을 넣으면 타입이 잘못됐다는 오류가 뜬다.
🐹 회고
타입스크립트를 더 깊고 자세하게 배우고 싶었는데, 이번 기회에 더 깊게 배울 수 있을 것 같아 기쁘다. 책에서 서론 부분에 해당하는 파트를 읽었음에도 많은 걸 배울 수 있어 좋았다.ㄹ
