4. 기본 타입

자바스크립트나 파이썬과 같은 스크립트 언어들은 런타임 시 타입이 결정되는 동적 타입 언어이다. 따라서, 프로그램이 동작할 때 값을 보고 동적으로 타입을 결정하기 때문에 개발자가 예측하지 못한 문제들이 발생하는 경우가 많다. 이런 오류들을 줄이고자 타입스크립트가 탄생하게 되었다는 것은 이전 글에서 언급했던 적이 있으니, 아래의 링크에서 타입스크립트가 필요한 이유에 대해 한번 살펴보도록 하자.

 

https://kim1124.tistory.com/93?category=232829 

1. 타입 스크립트에 대해 알아보자.

 

이번 글에서는 타입스크립트의 핵심 개념인 타입에 대해 알아보자.

 

1. 타입 표기

 

자바스크립트 코드와 타입스크립트 코드 비교 시 가장 크게 다른 점은 변수에 타입을 지정하는 부분이다. 타입스크립트 코드에서 변수의 타입을 표현하기 위해 타입 표기를 사용하며 value: type의 형태로 표기한다. 콜론을 이용하여 타입을 표기하는 것을 타입 표기라고 한다. (Type Annotation)

 

const valueA : number = 10
const valueB : string = '리뷰하는 개발자'
const valueC : boolean = true
const valueD : object = {author: '리뷰하는 개발자'}
const valueF : number[] = [1, 2, 3, 4, 5]
const valueG : Array<number> = [1, 2, 3, 4, 5]
const valueH : [string, string, number] = ['리뷰하는', '개발자', 10]
const valueI : void = undefined

 

2. 기본 타입

 

타입스크립트는 자바스크립트의 슈퍼셋 언어이기 때문에 당연히 자바스크립트의 기본 타입을 모두 지원한다. 여기에 타입스크립트만의 특별한 타입이 추가되는데 아래에서 살펴보도록 하자. 먼저 자바스크립트의 기본 타입은 아래와 같다.

 

• String
• Number
• BigInt
• Boolean
• Object
• Undefined
• Symbol
• Function
• Null

 

아마 여러분이 이미 자바스크립트에 대해 공부하거나 이미 개발자로서 업무를 진행하고 있다면 위의 타입들에 대해서는 아주 많이 익숙할 것이다. 따라서, 위의 기본적인 자료형에 대해서는 따로 언급하지 않도록 하겠다. 다만, Null과 Undefined의 경우에는 타입스크립트에서 사용 시 주의해야 할 사항이 있다.

 

사실 Null과 Undefined의 경우에는 자바스크립트를 개발하는 과정에서 실수로 생긴 타입으로 굳이 분리될 필요가 없는데 2가지 타입으로 분리가 돼버린 케이스다. 그러다 보니 현역에서도 종종 아래와 같은 실수가 나오는 것을 볼 수 있다.

 

const valueA = null
const valueB = undefined

if (valueA == valueB) {
 // true
}

if (valueA === valueB) {
 // false
}

 

값만 비교하는 == 연산자의 경우에는 이 두 타입을 false 인식하기 때문에 위의 코드는 True가 되지만, 타입까지 비교하는 === 연산자의 경우에는 Null과 Undefined의 타입이 다르므로 False로 처리한다. 현역 개발자들도 이 두 가지의 타입을 가지고 혼동하는 경우가 보이는데... 뭐 지금이라도 알고 제대로 처리하면 된다. 위와 같은 코드가 프로그램에 심각한 문제를 발생시킬 수 있다는 것을 알아두자.

 

타입스크립트에서는 위와 같은 상황을 방지하기 위해 다른 타입에 할당할 수 없도록 하는 --strictNullChecks 옵션이 추가되었다. 원래 Null과 Undefined는 다른 타입의 서브 타입이기 때문에 아래와 같이 할당이 가능했다.

 

const valueA : string = null
const valueB : number = undefined

 

하지만 위의 사례에서 봤듯이 많은 문제를 발생시키는 경우가 많아서 두 개의 타입을 체크할 수 있도록 공식적으로 옵션을 제공한다. 아래의 링크는 타입스크립트 공식 사이트에 정의된 설명이니 참고하길 바란다.

 

https://www.typescriptlang.org/tsconfig#strictNullChecks

TSConfig Reference - Docs on every TSConfig option

 

3. 타입스크립트에서 추가된 타입

 

이번에는 타입스크립트에서 추가된 타입에 대해 알아보자. 아래의 타입들은 타입스크립트에서만 제공하는 기본 타입이다. 아래에서 하나씩 확인해보도록 하자.

 

• Any
• Void
• Tuple
• Enum
• Never

 

3.1 Any

 

Any 타입은 기존 자바스크립트와 같이 변수에 어떠한 타입을 넣어도 허용하겠다는 의미로 사용된다. 따라서 Any 타입을 남발하는 경우에는 타입 체크를 제대로 하지 못하기 때문에 타입스크립트를 사용하는 목적이 퇴색될 수 있다.

 

let valueA : any = 10
let valueB : any = '리뷰하는 개발자'
let valueC : any = {author: '리뷰하는 개발자'}
let valueD : ant = [1, 2, 3, 4, 5]

 

그렇다면 타입스크립트에서 이러한 타입을 지원하는 이유는 무엇일까? 우리는 이 물음에 대한 답을 찾기 위해 타입스크립트의 특징 중 하나인 점진적 타이핑 (Gradual Typing)에 대해 알아둘 필요가 있다. 점진적 타이핑이란, 일부 변수와 표현식은 정적으로 처리하여 컴파일 시간에 타입을 체크하도록 하고 타입이 정해지지 않은 것들은 기존과 동일하게 동적으로 처리할 수 있게 하는 특징을 말한다.

 

타입이 정해져 있는 정적 타입의 언어는 생산성이 떨어지지만 프로그램의 안전성은 높고, 동적 타입 언어의 경우에는 생산성은 높지만 프로그램의 안전성은 떨어지는 특징을 가지고 있다. 이것을 보완하기 위해 도입된 개념이 바로 점진적 타이핑으로 자바스크립트의 높은 생산성과 정적 타입 언어의 높은 안정성을 확보하기 위한 타입스크립트의 핵심 언어 디자인 요소중 하나인 것이다. 이 점진적 타이핑의 가장 대표적인 예가 Any 타입이다.

 

Any 타입은 타입 정의를 제공하지 않는 라이브러리 (Ex. 프로젝트에서 사용 중인 NPM 모듈이 타입스크립트를 제공하지 않는 경우)나 나중에 타입을 정의하고자 하는 경우, 타입을 표기하기 애매한 경우 등의 상황에서 사용한다. 하지만 이유가 어찌 됐든 Any 타입을 사용하는 경우 타입스크립트에서 타입 체크가 제대로 되지 않는 것은 사실이다. 따라서 개발자는 Any 타입을 정말 필요할 때만 사용하는 것이 좋으며, 기존 코드와의 호환성을 위해 Any로 타입을 표기했다면 나중에는 다른 타입으로 대체하는 것이 좋다.

 

Any 타입은 모든 타입을 대응할 수 있기 때문에 타입스크립트에서 제공하는 모든 타입의 부모 타입으로도 활용된다.

 

3.2 Void

 

void 타입은 null과 undefined만 할당이 가능한 타입으로 자바스크립트의 설계적 결함을 대체하고자 나온 타입이다. 주 사용처는 함수의 리턴 값이 없는 경우 리턴 타입을 표기하기 위해 사용된다.

 

const valueA : void = null
const valueB : void = undefined

function notReturn(): void {}

 

3.3 Tuple

 

파이썬에서는 자주 봤지만 자바스크립트에서는 생소한 튜플은 기본적인 개념은 배열이지만, 길이가 고정되어 있고 요소의 타입이 미리 지정되어 있는 고정식 배열이다. 타입 표기가 배열에서 사용하는 대괄호로 되어 있고, 요소의 개수에 맞게 타입이 지정된다는 것을 알아두자.

 

let tupleList : [string, number] = ['리뷰하는 개발자', 10]

 

타입이 이미 지정되어 있으므로 인덱스로 다른 타입을 넣고자 하는 경우 아래와 같이 IDE에서 에러를 발생시킨다.

 

 

또한, 이미 길이가 정해져 있기 때문에 인덱스가 오버되는 경우 에러를 발생시킨다. 일반 배열과 혼동하지 않도록 하자.

 

 

3.4 Enum (열거형)

 

다른 언어에서는 자주 보이는 열거형 타입은 상수를 모아 놓은 타입이다. 아래와 같이 사용할 수 있다. Enum 타입은 숫자형, 문자형, 복합형이 있으며 가능하면 동일한 타입으로 정의하는 것이 좋다.

 

enum enumValueA = {
  Fir = 1,
  Sec = 2
  Thr = 3,
  Fur = 4
}

enum enumValueB  {
  Fir = '첫번째',
  Sec = '두번째',
  Thr = '세번째',
  Fur = '네번째'
}

enum enumValueC {
  Fir = 1,
  Sec = '두번째',
  Thr = '세번째',
  Fur = 4
}

 

Enum은 특수 타입에서 대해서 다시 알아보도록 하고 일단 여기서는 상수 값의 모음이라고만 알고 있도록 하자.

 

3.4 Never

 

Never 타입은 아무런 값도 가질 수 없는 특이한 타입으로 무한 루프를 가진 함수와 같이 한번 빠지면 다음 단계로 진행되지 않는 특수한 경우에 사용한다.

 

function mouseIdleCheck() : never  {
  while(true) {
    // 여기에 빠지는 순간 이후의 코드는 실행될 수 없다.
  }
}

 

---

지금까지 타입스크립트의 기본 타입에 대해 알아보았다. 다음 글에서는 타입스크립트의 고급 타입과 타입 추론, 타입 호환, 타입 별칭에 대해 알아보도록 하겠다. 오늘은 여기까지~