우아한 타입스크립트 with 리액트 Chapter 1 ~ 3
🛵 우아한 타입스크립트 with 리액트
이 글은 우아한 타입스크립트 with 리액트를 읽고 작성한 글이다. 책 내용 전체를 요약하기보다 중요하다고 생각하는 내용 위주로 작성하려고 한다. 특히나 이 책은 배운 내용들을 내 프로젝트에 바로 적용하면서 읽어보려고 한다.
1장. 들어가며
폴리필과 트랜스파일
- 폴리필: 브라우저가 지원하지 않는 기능을 미리 구현해놓은 코드 혹은 플러그인
- 트랜스파일: 특정 언어로 작성된 코드를 다른 언어로 변환하는 것 혹은 최신 문법을 구형 브라우저에서도 동작할 수 있도록 변환하는 것 ex) Babel
웹사이트와 웹어플리케이션
- 웹사이트: 정보를 제공하는 것이 목적
- 웹어플리케이션: 사용자와 상호작용하는 것이 목적
타입스크립트는 자바스크립트의 슈퍼셋
- 슈퍼셋: 기존 언어에 기능을 추가한 언어, 기존 언어의 확장판
- 즉, 자바스크립트 코드는 타입스크립트 코드이다.
- 반면, 타입스크립트 코드는 자바스크립트 코드가 아니다.
2장. 타입
자료형으로서의 타입
- 컴퓨터의 메모리 공간은 한정적이다. 그래서 메모리 공간을 효율적으로 사용하기 위해 데이터의 타입을 지정한다.
- 데이터 타입은 여러 종류의 데이터를 식별하는 분류 체계로 컴파일러에게 값의 형태를 알려준다.
집합으로서의 타입
- 타입은 값이 가질 수 있는 유효한 범위의 집합이다.
- 타입 시스템은 코드에서 사용되는 유효한 값의 범위를 제한함으로써 런타임에서 발생할 수 있는 유효하지 않은 값에 대한 에러르 방지해준다.
정적 타입과 동적 타입
자바스크립트에도 타입은 존재한다. 다만 개발자가 컴파일 이전에 타입을 직접 정의해줄 필요가 없을 뿐이다. 타입을 결정하는 시점에 따라 정적 타입과 동적 타입으로 나뉜다.
- 정적 타입: 컴파일 시점에 타입을 결정하는 것 ex) 타입스크립트
- 동적 타입: 런타임 시점에 타입을 결정하는 것 ex) 자바스크립트
강타입과 약타입
개발자가 의도적으로 타입을 명시하거나 바꾸지 않았음에도 컴파일러 혹은 엔진 등에 의해서 런타임에 타입이 자동으로 변환되는 경우가 있다. 이러한 타입 변환에 따라 강타입과 약타입으로 나뉜다.
- 강타입: 타입 변환을 엄격하게 제한하는 것
- 약타입: 타입 변환을 자유롭게 허용하는 것
구조적 타이핑
타입스크립트는 구조적 타이핑을 따른다. 구조적 타이핑은 타입을 결정할 때 타입의 내부 구조를 비교하는 것을 의미한다. 즉, 타입의 이름이 같은지 여부보다는 타입의 내부 구조가 같은지 여부를 따진다.
interface Person { name: string; age: number; } interface Product { name: string; age: number; } // 구조적 타이핑에 따라 Person과 Product는 같은 타입으로 간주된다.
이처럼 타입스크립트가 구조적 타이핑을 채택한 이유는 타입스크립트가 자바스크립트를 모델링한 언어이기 때문이다. 자바스크립트는 본질적으로 덕 타이핑
을 기반으로 하는데, 덕 타이핑은 어떤 함수의 매개변숫값이 올바르게 주어진다면 그 값이 어떻게 만들어졌는지 신경쓰지 않고 사용한다는 개념이다.
타입스크립트는 자바스크립트의 덕 타이핑을 그대로 받아들여 명시적인 이름을 가지고 타입을 구분하는 대신 객체나 함수가 가지는 구조적 특징을 기반으로 타이핑하는 구조적 타이핑
을 채택했다.
값 vs 타입
-
값: 프로그램이 처리하기 위해 메모리에 저장하는 모든 데이터
-
타입: 값의 종류를 식별하는 분류 체계
-
타입스크립트 문법인
type
으로 선언한 내용은 자바스크립트 코드로 변환되지 않는다. 즉, 타입스크립트 코드는 자바스크립트 코드가 아니다. -
타입스크립트에서는 값과 타입이 함께 사용된다. 값과 타입은 타입스크립트에서 별도의 네임스페이스에 존재한다.(서로 다른 세상에 존재한다고 생각하면 된다.)
값과 타입 공간에 동시에 존재하는 심볼도 있다. 대표적인 것이
class
와enum
이다. 타입스크립트에서 어떠한 심볼이 값으로 사용된다는 것은 컴파일러를 통해 타입스크립트 파일을 자바스크립트 파일로 변환해도 여전히 그 심볼이 존재한다는 것을 의미한다.
3장. 고급 타입
작성 예정