러닝 타입스크립트 - 2장. 타입 시스템

 

1. '타입' 정의

- 타입(Type) : 자바스크립트에서 다루는 값의 형태 (값의 속성/메서드/내장되어 있는 type of 연산자)

- 타입스크립트가 인식하는 원시 타입 (7가지)

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

- 타입스크립트는 구문에서 변수나 함수의 타입을 유추할 만큼 충분히 똑똑하다.

 

2. 타입 시스템

- 타입스크립트의 타입 시스템이 코드를 이해하는 방법

• 코드를 읽고 존재하는 모든 타입과 값을 이해한다.
• 각 값이 초기 선언에서 가질 수 있는 타입을 확인한다.
• 각 값이 추후 코드에서 어떻게 사용될 수 있는지 모든 방법을 확인한다.
• 값의 사용법이 타입과 일치하지 않으면 사용자에게 오류를 표시한다.

타입 추론 과정을 살펴보자. 

다음은 속성을 잘못 호출하여 타입 오류가 발생한 예시이다.

const anExampleVariable = "Hello World"

console.log(anExampleVariable.length())

타입스크립트가 오류를 감지한 모습

타입스크립트가 체크한 과정을 살펴보면,

• 코드를 읽고 anExampleVariable 변수의 초기값이 string 타입임을 추론한다.
• anExampleVariable.length() 함수 호출부에서 string 타입은  .length()를 함수처럼 호출할 수 없음을 오류로 표시한다.

 

3. 타입 오류와 구문 오류의 차이점

- 구문 오류 : 문법적으로 틀린 경우

- 타입 오류 : 타입스크립트가 type 체킹을 할 때 오류를 감지한 경우

 

타입오류의 경우 구문상 유효하지만, 타입스크립트는 코드가 실행될 때 충돌할 가능성이 있음을 감지한다.

물론, 타입오류가 나도 자바스크립트를 실행할 수는 있다. 그러나 실행 과정에서 예기치 못하게 동작할 수 있는 가능성을 타입 오류도 나타내 주는 것이다.

 

4. 유추한 변수 타입과 변수 할당 가능성

- 할당 가능성 : 새로운 값이 할당될 경우, 새롭게 할당된 값의 타입이 초기에 추론한 타입과 동일한지 확인하고
                       할당 가능 여부를 체크하는 것

 

예를 들면,

변수에 처음 할당된 값의 타입이 string이다. 이후에 다른 string 값을 할당하는 것은 문제되지 않는다.

반면, 이후 값을 할당할 때 stirng 타입이 아닌 다른 타입의 값을 할당하려고 하는 경우 오류를 뱉어낸다.

let anExampleVariable = "Hello World"

anExampleVariable = false;

할당 가능성 오류

'Type ... is not assignable to type ...' 형태의 오류는 아마 우리가 가장 자주 마주하는 타입 오류일 것이다.

 

 

 

5. 타입 어노테이션(:) 으로 변수 타입을 명시적으로 선언하고 any 타입의 진화 방지하기

일반적으로 타입스크립트는 변수에 값을 할당하지 않으면, 그 변수에 대한 타입 추론을 시도하지 않는다.

변수만 선언했을 때 암묵적으로 any 타입으로 간주하며, 이 변수는 모든 값/타입이 될 수 있음을 의미한다.

 

초기 타입을 유추할 수 없는 변수를 "진화하는 any"라고 한다.

→ 타입을 강제하는 대신 새로운 값이 할당될 때마다 변수 타입에 대한 이해를 발전시킨다.

let rocker; //type: 암묵적 any 

rocker = "Hello World"; //type: string
rocker.toUpperCase(); //Ok

rocker = 1.55; //type: number;
rocker.toPrecision(); //Ok

rocker.toUpperCase(); //Error: Property 'toUpperCase' does not exist on type 'number'

 

이 방법은 타입스크립트의 타입 검사 목적을 부분적으로 쓸모없게 만든다.

type이 any > string > number 로 진화하는 것이 의도된 것인지 파악하기 어렵고, 타입 검사가 어려워질 가능성이 높다.

 

그렇다면 초기값을 할당하지 않고도 타입 스크립트가 타입을 잘 유추할 수 있도록 하는 방법은 무엇일까?

 

타입스크립트에서는

"타입 어노테이션(Type Annotation)" (`:`) 을 제공한다.

 

이 타입 어노테이션은 타입스크립트에만 존재하며 런타임 코드에 영향을 주지 않는다.

자바스크립트에서 타입이 사라져서 컴파일 되는 것을 확인할 수 있다.

✅ 타입스크립트에만 존재하는 문법은 자바스크립트 컴파일시 모두 없어진다.

또한 타입스크립트 타입 역시 컴파일 통해 생성된 자바스크립트에 어떠한 영향도 주지 않는다.

 

5.1 불필요한 타입 어노테이션

타입스크립트에서 충분히 추론이 가능한 것들은 따로 타입 어노테이션을 해주지 않아도 된다.

이는 불필요한 내용이 추가되는 것이며 중복이 되는 것이나 마찬가지이다.

 

이 책의 필자 역시 불변 변수에는 타입 어노테이션을 추가하지 않는 것을 선호한다.

타입 어노테이션을 수동으로 작성하는 일은 매우 번거로우며, 타입이 변경되거나 복잡할 때 더욱 그러하다.

일반적으로는 타입스크립트가 유추하지 못하는 변수(혹은 함수)들에 대해서만 타입 어노테이션을 활용하면 된다.

 

6. 타입 형태에서 객체 멤버 확인하기

타입스크립트는 객체에 어떤 멤버 속성이 존재하는지 알고 있다.

변수의 속성에 접근하려고 할 때 타입스크립트는 접근하려는 속성이 변수의 타입에 존재하는지 확인한다.

타입스크립트는 객체의 형태에 대한 이해를 바탕으로 할당 가능성 뿐만 아니라 객체 사용과 관련된 문제도 알려준다ㅏ.