Learning TypeScript : 타입시스템

1. 할당 가능성(Assignability)

• 타입스크립트에서 함수 호출이나 변수에 값을 제공할 수 있는지 여부를 확인하는 것

• Type...is not assignable to type... 에러

  • 첫번째 type은 코드에서 변수에 할당하려고 시도하는 값
  • 두번째 type은 첫번째 타입이 할당되는 변수

• 할당 가능성 개념은 복잡한 객체를 비교할 때 중요한 개념이다.
  

2. 타입 애너테이션(Type Annotation)

• 초깃값을 할당하지 않고도 변수의 타입을 선언할 수 있는 구문

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

• 타입 애너테이션은 변수 이름 뒤에 배치되고 콜론과 타입 이름을 차례대로 쓴다.
• 일반적으로 any 타입을 사용해 타입이 아무렇게 변환되는 것을 허용하게 되면 타입 검사의 목적이 없어진다. 그래서 let rocker;보다는 타입 애너테이션을 사용하는 것이 좋다.

let rocker; // 타입: any

• 타입 애너테이션은 TS에만 존재한다.
• 그리고 런타임 코드에 영향을 주지 않고, 유효한 JS 구문도 아니다.

불필요한 타입 애너테이션 사례

• TS가 이미 firstName이 string 타입임을 유추할 수 있음에도 타입 애너테이션을 사용한 경우

let firstName: string = 'Tina';

3. ESM에서 타입 형태

3-1. 모듈에서 변수이름 충돌

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

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

• 동일한 shared 변수를 문제없이 내보낸다.

// c.ts
import { shared } from './a';
//       ^^^^^^
// Error: Import declaration conflicts with local declaration of 'shared'.

export const shared = 'Cher';
//           ^^^^^^
// Error: Indivisual declarations in merged declaration.
// 'shared' must be all exported or all local.

• import한 shared 변수와 c.ts에서 정의된 shared 변수이름이 충돌되어 타입 오류가 발생한다.

3-2. 스크립트에서 TS의 변수이름 충돌

• 스크립트 파일(= 모듈이 아닌 모든 파일)에 선언된 변수는 다른 스크립트 파일에 선언된 변수와 동일한 이름을 가질 수 없다.
  • 파일이 스크립트면 TS는 해당 파일을 전역 스코프로 간주하기 때문이다.

// a.ts
const shared = 'Cher';
//    ^^^^^^
// Error: Cannont redeclare block-scoped variable 'shared'.

// b.ts
const shared = 'Cher';
//    ^^^^^^
// Error: Cannont redeclare block-scoped variable 'shared'.

4. ESM이 아닌 CJS 방식에서 TS

• 책에 TS가 CommonJS 같은 이전 모듈을 사용해서 작성된 파일의 import와 export 형태는 인식하지 못한다고 되어 있다.
• 공식문서에서는 CommonJS의 module.exports = 문법을 모두 다룬다고 되어 있다.

4-1. JS의 모듈 형식

• 작년부터 자스를 배우기 시작한 나는 ESM 방식이 당연하지만 모듈을 가져오는 다른 많은 방식이 있다.

• Asynchronous Module Definition(AMD)

  • 브라우저에서 사용된다.
  • define 함수를 사용하여 모듈을 정의한다.

    // 의존성 배열과 팩토리 함수를 가진 define 함수 호출
    define(['val1', 'val2'], function (val1, val2) {
        return function () {};
    };

• CommonJS

  • node.js에서 사용된다.
  • require과 module.exports를 통해 의존성과 모듈을 정의한다.

     const val1 = require('./val1');
      const val1 = require('./val1');
      module.exports = function() {...}

• ESM 모듈 형식은 ES6부터 JS에서의 기본 모듈 형식이다. 아직 모든 브라우저에서 지원되지는 않기 때문에 babel과 같은 트랜스파일러를 사용해서 ESM 포맷을 AMD나 CommonJS 포맷으로 변환해야 한다.

4-2. 모듈 로더

• 모듈은 모듈 로더를 사용하여 다른 모듈을 import한다.
• 모듈 로더는 모듈을 해석하고 로드한다.
• RequireJS 로더
  • 웹 애플리케이션의 AMD 모듈용 로더
• Node.js 로더
  • CommonJS 모듈용 로더