타입스크립트 이해하기 - 타입 시스템(정적 / 동적 / 점진적) / 집합 / 호환성 / 타입 계층

최종 수정 : 2024-05-27

문법 배우기도 바쁜데, 원리까지 알아야 하는가?

문법만 배워서 바로 쓰기에는 타입스크립트가 만만한 대상이 아니다.

---

모든 프로그래밍 언어는 타입 시스템을 가지고 있다.

타입 시스템

언어의 타입 관련된 문법 체계를 말하며, 정적 타입 시스템과 동적 타입 시스템으로 나눌 수 있다.

• 값들을 어떤 기준으로 묶어 타입을 규정할 것인가?
• 코드의 타입을 언제 검사할 것인가?
• 어떻게 타입을 검사할 것인가?

 

정적 타입 시스템

코드 실행 이전에 모든 변수의 타입을 고정적으로 컴파일러가 결정한다. 코드를 실행하기 전에 정적으로 변수의 타입을 결정한다. 따라서 엄격하고 고정적인 시스템이다. 대표적으로 C언어, Java가 이에 해당한다.

모든 변수에 일일이 타입을 지정해줘야 하므로 타이핑 양이 증가하고 유연하지 못하다.

 

동적 타입 시스템

코드를 실행하고 나서 그때마다 유동적으로 변수의 타입을 결정한다. 자유롭고 유연한 시스템이다. 대표적으로  Python, JavaScript가 이에 해당한다.

코드의 타입 오류를 미리 검사할 수 없어 예기치 못한 오류가 발생할 수 있다.

 

점진적 타입 시스템(Gradual Type System)

동적 타입 시스템과 정적 타입 시스템을 혼합한 것.
실행 전 검사를 통한 타입 안정성을 확보한다. 또한 자동으로 변수의 타입을 추론한다. 정적 언어는 프로그램 실행 전 타입 검사를 통과해야만 하지만, TS는 부분적으로 타입을 도입하여 코드 전체에 타입을 명시하지 않아도 프로그램을 실행시킬 수 있다.

실행 전 검사를 통한 타입 안정성을 확보하면서 자동으로 변수의 타입을 추론한다. 대표적으로 any 타입을 통해 이를 실현할 수 있다.

---

타입은 집합이다.

타입스크립트에서의 타입은 집합의 개념으로 이해하면 좋다.

 

타입 호환성

어떤 타입을 다른 타입으로 취급해도 괜찮은지 판단하는 것을 말한다.

한 입 크기로 잘라먹는 타입스크립트

let num1: number = 10; // number type
let num2: 10 = 10; // number literal type

num1 = num2; // 가능 ==> 업 캐스팅
num2 = num1; // 오류 ==> 다운 캐스팅

한 입 크기로 잘라먹는 타입스크립트

---

타입 계층도

타입 호환성의 관점에서 해석하면 된다.

한 입 크기로 잘라먹는 타입스크립트

---

객체 타입의 호환성

어떤 객체타입을 다른 객체타입으로 취급해도 괜찮은가?

객체 타입은 프로퍼티를 기준으로 슈퍼타입과 서브타입이 결정된다. 구조적 타입시스템을 따르기 때문이다.

typd Animal = {
  name: string;
  color: string;
};

type Dog = {
  name: string;
  color: string;
  breed: string;
};

let animal: Animal = {
  name: '기린',
  color: 'yellow',
};

let dog: Dog = {
  name: '돌돌이',
  color: 'brown',
  breed: '진도',
};

animal = dog; // 가능 ==> 업 캐스팅
dog = animal; // 불가능 ==> 다운 캐스팅

 

초과 프로퍼티 검사

type Book = {
  name: string;
  price: number;
};

type ProgrammingBook = {
  name: string;
  price: number;
  skill: string;
};

let book: Book;
let programmingBook: ProgrammingBook = {
  name: '한 입 크기로 잘라먹는 타입스크립트',
  price: 33000,
  skill: 'reactjs',
};

book = programmingBook; // 가능 ==> 업 캐스팅
programmingBook = book; // 불가능 ==> 다운 캐스팅

// '초과 프로퍼티 검사' 라는 타입스크립트의 특수한 기능으로 인해 불가능
let book2: Book = {
  name: '한 입 크기로 잘라먹는 타입스크립트',
  price: 33000,
  skill: 'reactjs',
};

// 이렇게 하면 가능
let book3: Book = programmingBook;