Learning TypeScript : 타입시스템

Moon Hee·2023년 2월 22일
0

Learning TypeScript

목록 보기
2/3

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에서 사용된다.
    • requiremodule.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 모듈용 로더
profile
프론트엔드 개발하는 사람

0개의 댓글