Modules

JavaScript 모듈이 어떻게 정의되는가

• TypeScript에서는 ECMAScript 2015 부터 top-level import, export가 포함된 어떤 파일이든 module로 간주됨

• 반대로, top-level import, export가 없으면 전역적으로 이용가능한 스크립트로 여겨짐

• 모듈은 걔네 자신만의 스코프에서 실행이 되고 전역적으로 실행되지 않음
• 모듈안에서 정의된 변수, 함수, 클래스는 모듈 바깥에서는 보이지 않음(명시적으로 export를 하지 않는 이상)

Modules in TypeScript

ES Module Syntax

// @filename: hello.ts
export default function helloWorld() {
  console.log("Hello, world!");
}

import helloWorld from "./hello.js";
helloWorld();

default를 생략하고 여러 export를 할 수 있음

// @filename: maths.ts
export var pi = 3.14;
export let squareTwo = 1.41;
export const phi = 1.61;
 
export class RandomNumberGenerator {}
 
export function absolute(num: number) {
  if (num < 0) return num * -1;
  return num;
}
Try

export vs export default

• Normal export and import

export interface ITask{
taskName: string;
deadline: number;
}

import {ITask} from "./interfaces"

• export 할 때 사용했던 이름 그대로 사용해야 하고 destructure 해주어야 함

• export default

export default {login,logout};

import {login, logout} from "auth"
// or 
import auth from "auth"
auth.login();
auth.logout();

• export default를 사용하면 import 시에 destructure 해서 하나씩 사용할 수도 있고
• 내가 원하는 이름으로 변경해서 그대로 import 할 수도 있음(Named export and import)

Typescript Specific ES Module Syntax

• Typescript 에서는 Type을 import 하기 위해서 기존의 import 구문을 확장 시켰음 ⇒ import type

// @filename: animal.ts
export type Cat = { breed: string; yearOfBirth: number };
'createCatName' cannot be used as a value because it was imported using 'import type'.
export type Dog = { breeds: string[]; yearOfBirth: number };
export const createCatName = () => "fluffy";
 
// @filename: valid.ts
import type { Cat, Dog } from "./animal.js";
export type Animals = Cat | Dog;
 
// @filename: app.ts
import type { createCatName } from "./animal.js";
const name = createCatName();

// @filename: app.ts
import { createCatName, type Cat, type Dog } from "./animal.js";
 
export type Animals = Cat | Dog;
const name = createCatName();