TypeScript 모듈

📌 소스 코드를 여러 개의 모듈로 분할하면 각각의 모듈에 어떤 내용이 있는지를 서로 알려야 하므로

export와 import라는 키워드를 사욯합니다.

export는 기능을 제공하는 쪽에서 사용 / import는 다른 모듈의 기능을 이용하는 쪽에서 사용합니다.

 

심벌이란?

 

ECMAScript 2015부터, symbol 은 number 와 string 과 같은 기본 데이터 타입입니다.

symbol 값은 Symbol 생성자를 호출함으로써 생성됩니다.

let sym1 = Symbol();
let sym2 = Symbol("key"); // 선택적 문자열 키

 

심벌은 불변하고 유일합니다.

let sym2 = Symbol("key");
let sym3 = Symbol("key");

sym2 === sym3; // false, 심벌은 유일하다.

문자열처럼, 심벌은 객체 프로퍼티의 키로써 사용될 수 있습니다.

const sym = Symbol();

let obj = {
[sym]: "value",
};

console.log(obj[sym]); // "value"

 

또한 심벌은 초기화된 프로퍼티 선언과 결합되어 객체 프로퍼티와 클래스 멤버를 선언할 수 있습니다.

const getClassNameSymbol = Symbol();
class C {
[getClassNameSymbol]() {
return "C";
  }
}
let c = new C();
let className = c[getClassNameSymbol](); // "C"

 

import 키워드 - 아래의 2개 방식 모두 기능이 동일합니다. 🧐

 

어떤 파일이 export 키워드로 내보낸 심벌을 받아서 사용하려면 import 키워드로 해당 심벌을 불러와야 합니다.

import { 심벌 목록 } from '파일의 상대 경로'

import {IPerson, makePerson} from './person/Person'

 

import * as 구문

import * as 심벌 from '파일 상대 경로'

export default 키워드

타입스크립트는 자바스크립트와 호환하기 위해서 export default 구문을 사용합니다.

 

✔ [export default의 특징]

- export default 키워드는 1개의 모듈이 내보내는 기능 중 오직 1개에만 붙일 수 있습니다.

- export default가 붙은 기능은 import 문으로 불러올 때, 중괄호 {} 없이 사용 가능합니다.

import { makeRandomNumber } from "../utils/makeRandomNumber";

import IPerson from './IPerson'

- export default는 export 등이 있는 파일에서도 사용 가능합니다.

 

외부 패키지를 사용할 때 import 문

실습을 위해 chance와 ramda 패키지를 설치합니다.

npm i -S chance ramda
npm i -D @types/chance @types/ramda

chance와 ramda 패키지 설치 완료 화면

 

타입스크립트 소스코드는 웹 브라우저와 Node.js 양쪽에서 모두 동작해야 합니다.

하지만, 웹 브라우저와 Node.js는 물리적으로 동작하는 방식이 달라 여러 개의 파일로 분할된 자바스크립트 코드 또한 웹 브라우저와 Node.js 양쪽에서 각각 다르게 동작합니다.

 

✔ 웹 브라우저에서 동작: amd

✔ Node,js에서 동작: commonjs

 

[tsconfig.json 파일 내부]

{

  "compilerOptions": {

    "module": "commonjs",

    "esModuleInterop": true,

    "target": "es5",

    "moduleResolution": "node",

    "outDir": "dist",

    "baseUrl": ".",

    "sourceMap": true,

    "downlevelIteration": true,

    "noImplicitAny": false,

    "paths": { "*": ["node_modules/*"] }

  },

  "include": ["src/**/*"]

}

 

- moduleResolution 키 : module 키 값이 commonjs이면 Node.js에서 동작하는 것을 의미하므로 키값은 항상 node로 설정합니다. 반면  module 키 값이 amd 이면 moduleResolution 키 값은 classic으로 설정합니다.

 

- target 키 : 트랜스파일할 대상 자바스크립트 버전을 설정합니다. 대부분 es5를 키 값으로 설정하고 최신 버전의 Node.js를 사용한다면 es6를 설정할 수 있습니다.

 

- baseUrl과 outDir 키 : 트랜스파일된 ES5 자바스크립트 파일을 저장하는 디렉터리를 설정합니다. 보통 현재 디렉터리를 의미하는 "."로 설정합니다. outDir 키는 baseUrl 설정값을 기준으로 하위 디렉터리 이름입니다. 이 키는 dist라는 값을 설정했으므로 빌드된 결과가 dist 디렉터리 내부에 생성됩니다.

 

- paths 키 : 소스 파일의 import 문에서 from 부분을 해석할 때 찾아야 하는 디렉터리를 설정합니다. 만약, import 문이 찾아야 하는 소스가 외부 패키지일 경우 node_modules 디렉터리에서 찾아야 하므로 키 값에 node_modules/*도 포함되었습니다.

 

- esModuleInterop 키 : 앞서 설정한 chance 패키지가 동작하려면 키 값을 반드시 true로 설정해야 합니다.

 

- scourceMap 키 : sourceMap 키 값이 true이면 .js 파일 이외에 .js.map 파일이 만들어집니다. 소스맵 파일은 주로 디버깅할 때 사용됩니다.

 

- downlevelIteration 키 : 생성기(generator)라는 타입스크립트 구문이 정상적으로 동작하려면 키 값을 반드시 true로 설정해야 합니다.

 

- noImplictAny 키 : 타입스크립트 컴파일러는 기본적으로 f(a,b) 처럼 매개변수 a,b에 타입을 명시하지 않는 코드일 경우 암묵적으로 f(a: any, b: any)처럼 any타입을 설정한 것으로 간주합니다. 만약 type을 명시하지 않으면 타입스크립트 언어의 장점을 사용하는 것이 아니므로 코드에 문제가 있음을 알려주는 역할을 수행합니다.

하지만, 이 오류는 타입스크립트를 처음 배우는 사람에게 혼란스럽게 하므로, 키 값을 false로 설정하였습니다. 이렇게 작성하면 타입을 지정하지 않더라도 문제로 인식하지 않습니다.