타입 시스템

💡 타입에 대한 이해와 타입 시스템을 통해 타입 검사기가 오류를 검사하는 과정에 대해 알아보자.

[1] 타입이란

타입

• 값의 형태
  • 값에 존재하는 속성, 매서드, typeof 연산자가 설명하는 것

타입스크립트의 기본 타입

• 자바스크립트 기본 원시타입(7)과 같음 ex) null, undefined, boolean, string, number, bigint, symbol
  • bigint
    • number 범위(-9007199254740991부터 9007199254740991까지)를 넘어가는 값을 쓰면 overflow가 발생할 수 있기 때문에 이를 보장하기 위해 사용
    • number, int와 속성/매서드는 다를 수 있음
  • symbol
    • 변경이 불가능한 원시 값이며 고유하다.

      const sym1 = Symbol();
      const sym2 = Symbol();
      const sym3 = Symbol('foo');
      const sym4 = Symbol('foo');
      
      console.log(sym1 === sym1);  // true
      console.log(sym1 === sym2);  // false
      console.log(sym3 === sym4);  // false

    • 프로퍼티 키로 사용
      • 심볼은 고유하기 때문에 심볼을 키로 갖는 프로퍼티는 다른 어떤 프로퍼티와도 충돌하지 않음

[2] 타입시스템

타입시스템

• 프로그래밍 언어가 프로그램에서 가질 수 있는 타입을 추론하는 규칙 집합
  • 타입스크립트에만 존재하는 개념은 아님
• 타입 시스템이 동작해서 타입에 대해 추론/ 오류 판단

동작 과정

let name = 'jumi';

name.length();
~~~~~~~~~~~~~~
Error: Type Number has no call signature

• 코드를 읽고 존재하는 모든 타입/값 이해 코드를 읽고 name이라는 변수를 이해
• 각 값이 초기 선언에서 가질 수 있는 타입 확인 초기값이 ‘jumi’이므로 string 타입이라고 결론
• 각 값이 코드에서 어떻게 사용되는지 모든 방법 확인 name의 .length멤버를 변수처럼 호출하는 코드 확인
• 값의 사용법이 타입과 일치하지 않으면 오류 표시 .length멤버는 함수가 아닌 숫자라는 오류를 표시

오류 종류

• 구문 오류
  • 코드로 이해할 수 없는 잘못된 구문을 감지한 경우 let let wat;
    
• 타입 오류
  • 구문 상 유효하지만 타입 감지기로 인해 타입오류가 감지된 경우
  • 실행될 때 충돌할 가능성이 있음을 감지 console.blub(’test’);
    

오류가 발생하더라도

Js 파일은 생성됨 → 의도한대로 동작하지 않을 수 있음 → tsconfig.json에서 옵션 설정 가능

할당 가능성

함수 호출이나 변수에 값을 제공할 수 있는지, 즉 전달된 값이 예상된 타입으로 할당이 가능한지 여부 확인

• 변수의 초기값을 읽고 해당 변수가 허용되는 타입 결정
• 새롭게 할당된 값의 타입이 변수의 타입과 동일한 지 확인

  let name = 'jumi';
  name = 28;
  ~~~~~~~~~~
  // -> Error: Type 'number' is not assignable to type 'string'
  // 첫 번째 type: 할당하려고 시도하는 값
  // 두 번째 type: 값이 할당되는 변수
  // 즉, 첫 번째 타입을 두 번째 타입에 할당하려고 하는데 타입이 다르다. 

타입 애너테이션

초기값이 없어도 타입을 지정하는 구문

let name: string;

• TS 만 존재하는 구문으로, 컴파일하면 JS 에서는 삭제됨
• 초기값이 할당되지 않은 변수의 타입은 암묵적으로 any로 간주하며, 새로운 값이 할당될 때 마다 타입도 변경
• any 허용하여 타입검사가 무용지물이 되는 것을 막는다.

타입 즉시 유추 가능한 경우에 애너테이션을 사용하면 중복 (불필요)

let name: string = 'jumi';

• 타입 시스템은 변경되지 않으며, 이 경우 단지 문서화 및 실수로 변수타입이 변경되는것을 막는 역할을 한다.

타입 형태

타입은 객체 형태를 가질 수 있으며, 할당가능성 뿐만 아니라 객체(해당 변수)에 어떤 속성이 존재하는지도 확인

let cher = {
	firstNm: 'a',
	lastNm: 'b'
}

cher.middleNm;
~~~~~~~~~~~~~~
// Error: middleNm dose not exist

[4] optional

모듈

• 모듈: export/import가 있는 파일 (commonJs는 인식불가)
  • 선언 스코프를 지역적으로 인식하며, 타 모듈을 import하지 않는다면 모듈 내 변수는 독립적이며 네이밍 충돌이 일어나지 않음
• 스크립트: 모듈이 아닌 모든 파일
  • 선언 스코프를 전역적으로 인식하며, 스크립트 내 변수는 전역 변수로 취급됨

// a.ts
export const shared = 'a';

// b.ts
export const shared = 'b';

// c.ts
import {shared} from './a';
~~~~~~~~~~~~~~~~~~~~~~~~~~
export const shared = 'c';
~~~~~~~~~~~~~~~~~~~~~~~~~~

// d.ts
const shared = 'c';