[1] module
독립 가능한 기능의 단위
(1) 장점
- 유지보수가 쉬워진다. 중복되는 코드를 줄일 수 있다.
- 모듈이라는 파일 내부에서 변수나 함수 이름을 사용하게 되면서 전역적인 스코프에서 이름 공간을 침범하지 않게 된다.
- 재사용성이 좋다.
(2) 모듈 시스템
모듈을 식별하는 것
모듈을 분리하는 것
모듈을 외부에 공개하는 것
(3) 내부모듈과 외부모듈
1. 내부 모듈
- namespace로 감싸져서 내부에서 파일들을 공유하는 것
- 네임스페이스 하나의 이름으로 여러개의 파일이 공간을 공유한다.
- 같은 네임스페이스에서 이름이 중복되서 사용이 되면 안된다.
- 각각 다른 네임스페이스에서는 이름이 중복되어도 문제가 없다.
- 참조할 필요가 없다.
2. 외부 모듈
- export로 사용을 할 수 있게 하는 것이다.
- 모듈마다 파일의 이름공간이 정해진다.
- 모듈 시스템에는 export가 아닌 exports라는 데이터들을 담는 객체가 존재한다. exports는 모듈로부터 데이터를 내보낼 수 있고 다른 커스텀 객체로 대체할 수도 있다.
- TypeScript에서는 CommonJS와 AMD에서 exports 객체를 다른 커스텀 객체로 대체하는 동작을 유사하게 따라할 수 있도록 "export =" 라는 문법을 지원하고 있다.
"export =" 는 모듈로 내보내지는 하나의 객체를 말한다.
"export =" 로 보내진 모듈은 require("")로 불러와야 한다.
module 속성이 esnext이면 에러 .d.ts에서는 에러 발생하지 않음
1. CommonJs
2. AMD
[2] import
모듈을 불러온다, 만약에 JS에서 TS에서 사용하는 타입정보를 불러온다면 자동으로 소멸된다.
import {모듈명} from 경로
- export로 된 모듈을 불러온다.
import 모듈명 from 경로
- default export로 된 모듈을 불러온다.
import * from 경로
- export가 사용된 모든 모듈을 불러온다.
import module = require("모듈명")
- "export ="로 내보낸 모듈은 require를 사용해서 받아야 한다.
import * as 별칭 from 경로;
import {default as 별칭} from 경로;
ex) import as THREE from "three";*
[3] export
모듈을 외부에서 호출할 수 있게 해준다.
export 모듈
- 모듈을 내보내느 방식
export 모듈
default export 모듈
- 오직 파일에 1개만 선언가능하다
default export 모듈
export { 모듈1, 모듈2 }
- named exports로 여러개의 모듈을 한번에 export 할 수 있다.
export { 모듈1, 모듈2 }
export { 별칭1 as 모듈1, 별칭2 as 모듈2 ... }
- 별칭을 이용해서 export를 하는 방법
export { 별칭1 as 모듈1, 별칭2 as 모듈2 ... }
export namespace 모듈1
- import * as 별칭 from "./";
export namespace 모듈1
(1) export 예시
[4] declare
변수, 상수, 함수, 클래스가 어딘가에 선언이 이미 되어있다는 의미이다.
- 자바스크립트(사용×)가 아닌 타입스크립트 컴파일러에 타입정보를 알리는 용도로 사용된다.
declare내부에서는declare가 붙어있어 생략가능
-
엠비언트 컨텍스트(Ambient Context) :are module 모듈명 {} , 현재는x )
-
namespace에 declare를 사용하여
js로 컴파일되지 않게하고 타입의 정보만을 보내주는 용도로 사용한다. -
다른 이름으로는 내부모듈 혹은 엠비언트 네임스페이스라고 한다.
-
declare module( declare module "모듈명" {
컴파일의 대상이 된다면 타입정보를 참조할 수 있게 해준다. export를 붙인 필드만 외부에서 참조가 가능하다 -
다른 이름으로는 외부 모듈 혹은 앰비언트 모듈이라 한다.
declare global
- 전역으로 참조가 가능하게 해준다. 별도의 불러오기를 할 필요가 없다
- 추가적으로 declare module에서만 중첩이 가능하다??
(1) declare 예시
declare const window: typeof globalThis & {
kakao: any;
}[5] namespace
js 일반 객체로 컴파일이 된다.
-
네임스페이스는 전역 스코프에 속해있지만 독립된 이름 공간을 가진다.
-
프로젝트에서 벗어난 라이브러리 모듈을 구성하는데 좋다고 한다.
-
객체로 만들고 객체 내부에 원하는 값들만 export로 사용을 할 수 있게 허용도 가능한것 같다.
-
iife 함수에 해당객체를 전달하고 그 함수를 즉시 호출하는 방식으로 컴파일된다.
네임스페이스 내부에서는 외부에서 접근이 불가능한데 export를 사용하여 외부에서 사용을 할 수 있게 해준다. -
네임스페이스.계층1
.을 이용하여 네임스페이스 간 계층을 만들어 줄 수 있다.
[6] .d.ts
타입스크립트에서 사용하는 파일로 타입의 선언을 작성하는 공간이다.
-
선언코드만 작성을 하고 일반코드는 작성하지 않는다
-
최상단 상수,변수,함수 등에는 declare나 export를 해주어서 타입만을 선언할수 있는 용도로 사용할 수 있게 해준다.
-
skipLibChck=false 위의 2가지 설정을 강제로 하게 한다.
-
declare module이나 declare namespace에 export를 생략해도 된다.
-
export as namespace
하나의 네임스페이스로 묶어서 외부로 export시키는 방법
전역 참조로 가능하게 해주어서 따로 코드를 불러올 필요가 없다.
