[TypeScript] 18장 모듈

1. Export = 선언 export 하기

타입스크릡트에서 export = 구문을 사용하기 위해 모듈을 내보낼 수 있습니다, 이 방식은 CommonJS 스타일의 모듈을 만들 때 주로 사용되는 방식입니다.

function myFunction() {
  console.log('Hello, World');
}

export = myFunction;

---

2. Export 문 (Export statements)

여러 가지 요소를 내보내는 방법으로 export문을 사용합니다.

export const number = 42;
export function sayHello() {
  console.log('Hello');
}

sayHello();

---

3. Re-export 하기 (Re-exports)

다른 모듈에서 내보낸 요소를 다시 내보내는 방법입니다.

// anotherModule.ts
export { number, sayHello } from './myModule';

---

4. import - 모듈에서 단일 export를 import 하기

단일 내보낸 요소를 가져오는 방법으로 import를 사용합니다.

import { sayHello } from './myModule';
sayHello(); // Hello

---

5. 전체 모듈을 단일 변수로 import 하기 

모듈 전체를 하나의 변수로 가져오는 방법입니다.

import * as myModule from './myModule';
console.log(myModule.number);
myModule.sayHello();

---

6. 모듈 exports 접근에 사용하기

가져온 모듈의 요소에 접근하는 방법입니다.

console.log(myModule.number); // 42

---

7. 부수효과만을 위해 모듈 import 하기

부수효과가 필요한 경우 모듈을 가져오는 방법입니다.

import './myModule'; // 실행만 하고 결과는 사용 X

---

8. 타입 import 하기

타입만 가져오는 방법입니다.

import type { MyType } from './myModule'

---

9. Default exports

기존 내보내기를 사용하는 방법입니다.

// myModule.ts
export default function () {
  console.log('This is a default export.');
}

---

10. x를 모두 export 하기

모듈의 모든 요소를 내보내는 방법입니다.

export * from './myModule';

---

11. export = 와 import = require()

CommonJS 스타일의 모듈을 사용할 때의 예시입니다.

// myModule.ts
function greet() {}
export = greet;

// main.ts
import greet = require('./myModule');
greet();

---

12. 모듈을 위한 코드 생성

타입스크립트는 컴파일 시 해당 모듈의 코드를 생성합니다. 모듈을 정의하고 사용하는 방법은 아래와 같습니다.

export const value = 100;
export function multiply(x: number) {
  return x * value;
}

---

13 . 선택적 모듈 로딩과 기타 고급 로딩 시나리오

조건부로 모듈을 로드하는 방법입니다.

if (someCondition) {
  import('./myModule').then((module) => {
    module.sayHello();
  });

---

14. 다른 Javascript 라이브러리와 함께 사용하기

타입스크립트는 다른 JS 라이브러리와 함께 사용할 수 있습니다.

import * as _ from 'lodash';
const array = [1, 2, 3];
console.log(_.reverse(array));

---

15. 속기 ambient 모듈 

전역 변수를 사용할 경우 정의합니다.

declare module 'myAmbientModule' {
  export function myFunction(): void;
}

---

16. 와일드카드 모듈 선언

모든 모듈을 잡아내는 와일드카드 선언입니다.

declare module '*.json' {
  const value: any;
  export default value;
}

---

17. UMD 모듈

UMD(Universal Module Definition) 모듈을 정의하는 방법입니다.

// myModule.js
(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define([], factory);
  } else if (typeof exports === 'object') {
    module.exports = factory();
  } else {
    root.myModule = factory();
  }
})(this, function () {
  return {
    greet: function () {
      console.log('Hello, UMD!');
    },
  };
});

---

 

GitHub - Koras02/typescript-bloging