CHAPTER 02. 타입 시스템

자바스크립트의 힘은 유연함에서 나옵니다.
그 유연함을 조심하세요!

🌓 타입의 종류

타입(Type) : 자바스크립트에서 다루는 값의 형태에 대한 설명

형태란 값에 존재하는 속성과 메서드 그리고 내장되어 있는 typeof 연산자가 설명하는 것을 의미

[예시] 초깃값이 “Aretha”인 변수를 생성하는 경우, 타입스크립트는 singer 변수가 문자열 타입임을 유추할 수 있다.

  
let singer = "Aretha";

타입스크립트의 가장 기본적인 타입은 자바스크립트의 일곱 가지 기본 원시타입과 동일하다. 일곱 가지 원시 타입은 다음과 같다.

  
null, undefined, string, number, boolean, bigint, symbol

타입스크립트는 다음 값을 일곱 가지 기본 원시타입 중 하나로 간주한다.

  
null;  // null
undefined;  // undefined
true;  // boolean
"Louise";  // string
1337;  // number
1337n;  // bigint
Symbol("Franklin");  // symbol

🌿 타입스크립트에서는 일반적으로 boolean과 number처럼 소문자로 참조하는 것이 모범 사례다.

1. 타입 시스템

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

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

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

[예시] 타입스크립트가 멤버 속성을 함수로 잘못 호출해 타입 오류가 발생하는 코드

타입스크립트는 다음과 같은 순서로 오류를 표시한다.

코드를 읽고 firstName이라는 변수를 이해한다.
초깃값이 “Whitney”이므로 firstName이 string 타입이라고 결론짓는다.
firstName의 .length 멤버를 함수처럼 호출하는 코드를 확인한다.
string의 .length 멤버는 함수가 아닌 숫자라는 오류를 표시한다. 즉, 함수처럼 호출할 수 없다.

타입스크립트의 타입 시스템에 대한 이해는 타입스크립트 코드를 이해하는 데 중요한 기술이다.

2. 오류 종류

타입스크립트에서 자주 접하게 되는 오류 두 가지는 다음과 같다.

구문 오류 : 타입스크립트가 자바스크립트로 변환되는 것을 차단한 경우
타입 오류 : 타입 검사기에 따라 일치하지 않는 것이 감지된 경우

🌿 두 오류의 차이점 중요!

2.1. 구문 오류

타입스크립트가 코드로 이해할 수 없는 잘못된 구문을 감지할 때 발생한다.
이는 타입스크립트가 TS 파일에서 JS 파일을 올바르게 생성할 수 없도록 차단한다.
물론 TS 코드를 JS로 변환하는 데 사용하는 도구와 설정에 따라 자바스크립트 코드를 얻을 수 있다(tsc 기본 설정에서는 가능).
- 하지만 결과가 우리가 생각하는 예상과 다를 수 있다.

타입스크립트는 구문 오류와는 상관없이 자바스크립트 코드로 변환을 하기 위해 최선을 다하지만, 우리가 원하는 결과가 아닐 수 있다. 따라서 자바스크립트를 실행하기 전에 구문 오류를 수정하는 것이 좋다.

2.2. 타입 오류

타입스크립트의 타입 검사기가 프로그램의 타입에서 오류를 감지했을 때 발생한다.
이때, 오류가 발생해도 타입스크립트 구문이 자바스크립트로 변환되는 것을 차단하지 않는다.
하지만 코드가 실행되면 무언가 충돌하거나 예기치 않게 작동할 수 있음을 나타낸다.

타입스크립트는 타입 오류가 있음에도 불구하고 자바스크립트 코드를 출력할 수 있다. 그래서 자바스크립트를 실행하기 전에 타입 오류를 확인하고 발견된 문제를 해결하는 것이 좋다.

🌓 할당 가능성

타입스크립트는 변수의 초깃값을 읽고 해당 변수가 허용되는 타입을 결정한다.
예를 들어, 변수가 처음 string 값이면 나중에 다른 string 값을 할당하는 것은 문제가 되지 않는다.
1 2 let firstName = "Carole"; firstName = "Joan"

하지만 변수의 다른 타입의 값이 할당되면 타입 오류가 발생한다.

타입스크립트에서 함수 호출이나 변수에 값을 제공할 수 있는지 여부를 확인하는 것을 할당 가능성 이라고 한다.

🌓 타입 애너테이션

변수에 타입스크립트가 읽어야 할 초깃값이 없는 경우도 있다.
타입스크립트는 나중에 사용할 변수의 초기 타입을 파악하려고 시도하지 않아, 기본적으로 any 타입으로 간주한다.
이러한 초기 타입을 유추할 수 없는 변수는 진화하는 any 라고 부른다.

  
let rocker; // 타입: any

rocker = "Joan Jett"; // 타입: string

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

  
let rocker: string;
rocker = "Joan Jett";

불필요한 타입 애너테이션

타입 애너테이션은 타입스크립트가 자체적으로 수집할 수 없는 정보를 타입스크립트에 제공할 수 있다.
타입을 즉시 유추할 수 있는 변수에도 타입 애너테이션을 사용할 수 있다.
1 let firstName: string = "Tina"; // 타입 시스템은 변경되지 않음
타입 애너테이션을 수동으로 작성하는 일은 번거로우며, 복잡한 타입일 때 더욱 문제가 된다.

🌓 타입 형태

타입스크립트는 변수에 할당된 값이 원래 타입과 일치하는지 확인하는 것 이상을 수행한다.
타입스크립트는 객체에 어떤 멤버 속성이 존재하는지 알고 있다.
만약 우리가 코드에서 변수의 속성에 접근하려고 한다면 타입스크립트는 접근하려는 속성이 해당 변수의 타입에 존재하는지 확인한다.

  
let rapper = "Queen Larifah";
rapper.length; // Ok

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

모듈

자바스크립트는 비교적 최근까지 서로 다른 파일에 작성된 코드를 공유하는 방법과 관련된 사양을 제공하지 않다.
ECMA스크립트 2015에는 파일 간에 가져오고 내보내는 구문을 표준화하기 위해 ECMA스크립트 모듈(ESM)이 추가되었다.

타입스크립트는 최신 모듈 파일을 기존 파일과 함께 실행할 수 있다.

모듈 파일에 선언된 모든 것은 해당 파일에서 명시한 export 문에서 내보내지 않는 한 모듈 파일에서만 사용할 수 있다.
한 모듈에서 다른 파일에 선언된 변수와 동일한 이름으로 선언된 변수는 다른 파일의 변수를 가져오지 않는 한 이름 충돌로 간주하지 않는다.

Reference

러닝 타입스크립트 (Learning TypeScript)

[LearningTS] Chapter 02. 타입 시스템