우아한 타입스크립트 with 리액트 요약 정리 — 2. 타입

📖이 글은 타입스크립트 스터디를 진행하면서 우아한 타입스크립트 with 리액트의 타입 내용을 정리한 글입니다.
핵심 개념, 느낀 점 등 간단하게 정리했습니다.

 

한눈에 보는 핵심 요약

• 타입이란 무엇인가?
• 타입스크립트의 동작 및 사용방법

 

주요 개념 정리

• 타입
  • 자료형(데이터 타입, data type): 여러 종류의 데이터를 식별하는 분류 체계
  • 집합: 값이 가질 수 있는 유효한 범위
  • 정적 타입: 모든 변수의 타입이 컴파일타임에 결정됨. 프로그램 안정성 보장(C, Java, TypeScript)
  • 동적 타입: 변수 타입이 런타임에 결정됨. 개발과정에서 에러가 없으므로 편함 (Python, JavaScript)
  • 강타입: 서로 다른 타입을 갖는 값끼리 연산을 시도하면 컴파일러 또는 인터프리터에서 에러 발생
  • 약타입: 서로 다른 타입을 갖는 값끼리 연산할 때 내부적으로 판단해서 특정값의 타입을 변환하여 연산을 수행한 후 값 도출
  • 컴파일 방식: 일반적인 컴파일(고수준-저수준 순으로 코드 변환)과 다르게 타입스크립트는 자바스크립트 파일로 변환함.
• 타입 시스템
  • type annotation: 변수 이름 뒤에 : type 구문을 붙여 데이터 타입을 명시해야 함.
  • 구조적 타이핑: 이름으로 타입을 구분하는 명목적인 타입 언어의 특징과 달리 구조로 타입을 구분함.
  • 구조적 서브타이핑: 형태(구조)가 같으면 다른 타입이라도 그 타입으로 인정해주는 것
• 점진적 타입 확인(gradually typed)
  • 컴파일 타임에 타입을 검사하면서 필요에 따라 타입 선언 생략을 허용하는 방식. 타입 선언을 생략하면 암시적 타입 변환이 일어남
• 자바스크립트 슈퍼셋
  • 기존 자바스크립트 코드에 정적인 타이핑을 추가한 것으로 자바스크립트의 상위 집합임.
  • 타입스크립트는 자바스크립트 문법을 포함하고 있음.
• 값 - 타입
  • 값은 프로그램이 처리하기 위해 메모리에 저장하는 모든 데이터임.
  • 타입은 선언(:) 또는 단언 문(as)으로 작성하고 값은 할당 연산자로 작성
    • 예시: const cat: Animal = {name: 'Roi', age: 1}
  • 값과 타입이 동시에 존재하는 경우
    • class, enum
• 타입 확인 방법
  • typeof: 피연산자의 데이터 타입을 나타내는 문자열을 반환함.
  • instanceof: 프로토타입 체이닝 어딘가에 생성자의 프로토타입 속성이 존재하는지 판한함.
  • 타입 단언: as 키워드를 사용하여 타입을 강제할 수 있음.
  • 타입 가드: 특정 조건을 검사해서 타입을 정제하고 타입 안정성을 높이는 패턴.
• 원시 타입

이름	설명
boolean	참(trun), 거짓(false)만 할당할 수 있는 타입
undefined	정의되지 않았다는 의미의 타입. 초기화되어 있지 않거나 존재하지 않은 타입
null	명시적·의도적으로 값이 비어있는 타입이나 undefined와 다름.
number	정수, 소수, 음수 등 숫자에 해당하는 모든 원시 값을 할당할 수 있는 타입
bigInt	ES202에서 도입된 타입. number 타입에서 최대 숫자를 넘어갈 때 사용하는 타입임. number과 상호 작용은 불가함.
string	공백을 포함한 문자열을 할당할 수 있는 타입.
symbol	ES2015에서 도입된 타입. 어떤 값과도 중복되지 않는 유일한 값을 생성함.

• 객체 타입

이름	설명
object	사용하지 않도록 권장하는 타입. any 타입과 유사하게 객체에 해당하는 모든 타입 값을 유동적으로 할당할 수 있음.
{}	객체 리터럴 방식으로 객체를 생성할 때 사용.
array	같은 종류의 값들을 순서대로 모아놓은 리스트
type&interface	객체나 값의 형태를 정의할 때 사용하는 키워드임. 데이터의 구조(모양)를 설명하는 틀
function	함수 타입. 화살표 함수 방식으로만 호출 시그니처를 정의함.

 

📎 용어 정리

용어	설명
컴파일타임	기계가 소스코드를 이해할 수 있도록 기계어로 변환되는 시점
런타임	기계어로 변환된 이후 변환된 파일이 메모리에 적재되어 시행되는 시점
컴파일러	특정 프로그래밍 언어로 쓰여 있는 문서를 다른 프로그래밍 언어로 옮기는 언어 번역 프로그램
인터프리터	프로그래밍 언어의 소스 코드를 한 줄씩 읽어들여 실행하는 컴퓨터 프로그램
type annotation	변수나 상수 혹은 함수의 인자와 반환 값에 타입을 명시적으로 선언해서 어떤 타입 값이 저장될 것인지를 컴파일러에 직접 알려주는 문법
구조적 타이핑	멤버만으로 타입을 관계시키는 방식(출처: Type Compatibility)
명목적 타이핑	같은 이름의 자료형으로 선언된 경우에만 서로 호환됨
덕 타이핑	"오리처럼 걷고, 오리처럼 운다면 그건 오리다"처럼 생김새(행동)만 맞으면 그 타입으로 간주하는 방식 런타임에 타입을 검사함

 

🧠 이 장에서 얻은 인사이트

• 구조적 서브 타이핑으로 인해 서로 다른 인터페이스를 가졌더라도 속성이 같다면 호환이 된다.
• type, interface만 사용해야하는 상황 중에 props에 Record 형식을 extends할 때 interface로 선언된 변수를 넣으면 에러가 발생한다.