개발자 9Diin의 개발일기

TypeScript 타입시스템과 타입의 종류 본문

2021-2023

TypeScript 타입시스템과 타입의 종류

9Diin 2023. 3. 10. 08:00
반응형
본 포스팅은 '러닝 타입스크립트' 도서를 전적으로 참고하여 작성하였습니다.

 

1️⃣ 타입의 종류

타입스크립트에서의 타입은 자바스크립트에서 다루는 값의 형태에 대한 설명이다. 우리가 흔히 알고 있는 자바스크립트의 자료형과 비슷하다고 이해하면 좋다. 여기서 '형태'란 값에 존재하는 속성과 메서드 그리고 내장되어 있는 typeof 연산자가 설명하는 것을 의미한다. 타입스크립트의 가장 기본적인 타입은 자바스크립트의 일곱 가지 기본 원시 타입 (Primitive Type)과 동일하다.

 

타입스크립트의 Type

  • null
  • undefined
  • boolean
  • string
  • number
  • bigint
  • symbol

 

2️⃣ 타입 시스템

타입 시스템은 프로그래밍 언어가 프로그램에서 가질 수 있는 타입을 이해하는 방법에 대한 규칙 집합이다.

기본적으로 타입스크립트의 타입 시스템은 다음과 같이 작동한다.

 

- 코드를 읽고 존재하는 모든 타입과 값을 이해한다.

- 각 값이 초기 선언에서 가질 수 있는 타입을 확인한다.

- 각 값이 추후 코드에서 어떻게 사용될 수 있는지 모든 방법을 확인한다.

- 값의 사용법이 타입과 일치하지 않으면 사용자에게 오류를 표시한다.

 

마지막 순서에서 사용자에게 오류를 표시해 주는 것이 너무나도 편리한 타입스크립트의 장점이다.

 

타입스크립트는 변수의 초깃값을 읽고, 해당 변수가 허용되는 타입을 결정한다. 나중에 해당 변수에 새로운 값이 할당되면 새롭게 할당된 값의 타입이 변수 타입과 동일한 지 확인한다. 타입스크립트에서 함수 호출이나 변수에 값을 제공할 수 있는지 여부를 확인하는 것을 '할당 가능성'이라 한다. 이런 것이 있구나 정도로 넘어가도 좋을 것 같다.

 

3️⃣ 타입 애너테이션

타입 애너테이션이라는 말은 변수에 타입을 설정한다라고 이해하면 된다. 때로는 변수에 타입스크립트가 읽어야 할 초깃값이 없는 경우도 있다. 타입스크립트는 나중에 사용할 변수의 초기 타입을 파악하려고 시도하지 않는다. 그리고 기본적으로 변수를 암묵적인 any 타입으로 간주한다. 즉, 변수는 세상의 모든 것이 될 수 있음 나타낸다. 이는 자바스크립트의 장점 중  하나인 자유도를 의미한다.

 

let typeCheck // 타입이 지정되지 않았기 때문에 any 타입으로 간주한다.
typeCheck = "Tistory TypeScript Posting" // 타입: string
typeCheck.toUpperCase() // OK - toUpperCase() 메서드는 string 타입에서 사용가능하기 때문에

typeCheck = 2023.0309
typeCheck.toPrecision(1) // OK - toPrecision() 메서드는 number 타입에서 유효 숫자 Number로 반올림된 고정 소수점 또는 지수 표기법으로 개체를 나타내는 문자열

타입스크립트는 number 타입으로 진화한 변수가 toUpperCase() 메서드를 호출하는 것을 포착했다. 그러나 변수가 string 타입에서 number 타입으로 진화된 것이 의도된 것인지 코드만 보고 우리는 알 수 없다. 일반적으로 any 타입을 사용해 any 타입으로 진화하는 것을 허용하게 되면 타입스크립트의 타입 검사 목적을 부분적으로 쓸모없게 만든다. 단순히 타입스크립트를 사용할 이유가 없다는 말이다.

let firstName: string = 'Marco'

타입스크립트는 초깃값을 할당하지 않고도 변수의 타입을 선언할 수 있는 구문인 '타입 애너테이션'을 제공하는데 타입 애너테이션은 변수 이름 뒤에 배치되며 콜론(:)과 타입 이름을 차례대로 기재한다. 위 코드처럼 말이다. 이것이 타입 애너테이션이다.

 

반응형