2023-03-09 · 9 min read · 학습

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

타입의 종류

타입은 자바스크립트에서 다루는 값의 형태에 대한 설명입니다.

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

원시타입: null undefined boolean string number bigint symbol

타입 시스템

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

타입스크립트에서는 다음과 같이 타입 시스템이 작동합니다.

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

오류 종류

타입스크립트에서는 크게 두 가지 종류의 오류가 있습니다.

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

구문 오류는 타입스크립트가 코드로 이해할 수 없는 잘못된 구문을 감지할 때 발생합니다.

let let wat;
//      ~~~
// Error: ',' expected.

컴파일된 자바스크립트 결과는 다음과 같습니다.

let let, wat

타입 오류는 타입스크립트의 타입 검사기가 프로그램의 타입에서 오류를 감지할 때 발생합니다.

오류가 발생했다고 해서 자바스크립트로 변환되는 것을 차단하지는 않지만 예기치 못한 행동이나 충돌에 대해 미리 암시를 해줍니다.

console.blub('hello')
// Error: Property 'blub' does not exist on type 'Console'

자바스크립트를 실행하기 전에 타입 오류를 확인하고 발견된 문제를 먼저 해결하는 것이 좋습니다.

할당 가능성

타입스크립트는 변수의 초깃값을 읽고 해당 변수가 허용되는 타입을 결정합니다.

타입스크립트 변수에 동일한 타입의 다른 값이 할당될 때는 문제가 없습니다.

let firstName = 'Carole'
firstName = 'Joan'

하지만 타입스크립트 변수에 다른 타입의 값이 할당되면 타입 오류가 발생합니다.

let lastName = 'King'
lastName = true
// Error: Type 'boolean' is not assignable to type 'string'.

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

전달된 값이 예상된 타입으로 할당 가능한지 여부를 확인하는 것입니다.

할당 가능성 오류 이해하기

Type … is not assignable to type… 는 타입스크립트 코드에서 가장 일반적으로 만나게 되는 오류입니다.

첫 번째 type 은 코드에서 변수에 할당하려고 시도하는 값입니다.

두 번째 type 은 값이 할당되는 변수입니다.

타입 애너테이션

변수에 타입스크립트가 읽어야 할 초깃값이 없는 경우도 있습니다. 이때 타입스크립트는 기본적으로 변수를 암묵적인 any 타입으로 간주합니다.

초기 타입을 유추할 수 없는 변수를 진화하는 any 라고 부릅니다. 특정 타입을 강제하는 대신 새로운 값이 할당될 때마다 변수 타입에 대한 이해를 발전시키는 것입니다.

let rocker // 타입: any


rocker = 'Joan Jett' // 타입: string


rocker.toUpperCase() // OK


rocker = 19.58 // 타입: number
rocker.toPrecision(1) // OK


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

타입스크립트는 값이 어떤 타입인지 알고 있을 때 가장 잘 작동해서 일반적으로 any 타입을 사용하면 타입 검사 기능을 잘 적용할 수 없게 됩니다.

타입스크립트는 초깃값을 할당하지 않고도 변수의 타입을 선언할 수 있게 하기 위해 타입 애너테이션을 제공합니다.

let rocker: string
rocker = 'Joan Jett'
rocket = 19.58
// Error: Type 'number' is not assignable to type 'string'.

변수에 타입 애너테이션으로 정의한 타입 외의 값을 할당하면 타입 오류가 발생합니다.

불필요한 타입 애너테이션

다음 코드는 string 타입 애너테이션이 중복되는 경우입니다.

let firstName: string = 'Tina' // 타입 시스템은 변경되지 않음

다음 코드는 초깃값이 있는 변수에 일치하지 않는 타입 애너테이션을 추가하여 호환되지 않는 경우입니다.

let firstName: string = 42
// Error: Type 'number' is not assignable to type 'string'.

아무것도 변하지 않는 변수에는 타입 애너테이션을 추가할 필요가 없습니다.

타입 형태

타입스크립트는 변수에 할당된 값이 원래 타입과 일치하는지 확인하는 것 이외에도 객체에 어떤 멤버 속성이 존재하는지 알고 있습니다.

let rapper = 'Queen Latifah'
rapper.length // OK


rapper.push('!')
// Error: Property 'push' does not exist on type 'string'.

모듈

ECMA스크립트 2015에서 파일 간에 가져오고 내보내는 구문을 표준화하기 위한 ECMA스크립트 모듈(ESM)이 추가되었습니다.

  • 모듈: export 또는 import 가 있는 파일
  • 스크립트: 모듈이 아닌 모든 파일

파일이 스크립트면 타입스크립트는 해당 파일을 전역 스코프로 간주합니다. 그래서 스크립트 파일에 선언된 변수는 다른 스크립트 파일에 선언된 변수와 동일한 이름을 가질 수 없습니다.

a.ts
const shared = 'Cher'
// Error: Cannot redeclare block-scoped variable 'shared'.
b.ts
const shared = 'Cher'
// Error: Cannot redeclare block-scoped variable 'shared'.

export 또는 import 문 없이 파일을 모듈로 만들어야 한다면 파일의 아무 곳에나 export{}; 를 추가해 강제로 모듈이 되도록 만들 수 있습니다.

// a.ts and b.ts
const shared = 'Cher' // OK


export {}

마치며

  • 타입, 타입스크립트가 인식하는 원시 타입 이해
  • 타입 시스템, 타입스크립트의 타입 시스템이 코드를 이해하는 방법
  • 타입 오류와 구문 오류의 차이점
  • 유추된 변수 타입과 변수 할당 가능성
  • 타입 애너테이션으로 변수 타입을 명시적으로 선언하고 any 타입의 진화 방지
  • 타입 형태에서 객체 멤버 확인
  • 스크립트 파일과는 다른 ECMA스크립트 모듈 파일의 선언 스코프