[Typescript] typescript이 컴파일 되는 기준과 d.ts파일

타입스크립트를 쓰다 라이브러리를 만들어 보고싶다 라는 마음에 컴파일 되는 과정이 궁금해졌어요. 그리고 다른 라이브러리에 있는 d.ts파일에 대해 궁금해져서 찾아본 글이에요.

 

🟦 컴파일이 되는 과정

gpt에게 일단 물어봤어요.

tsconfig.json 파일을 보고 컴파일을 시작한다고 해요. 컴파일 할 때 cjs, mjs 정하는 기준은 module 옵션에 있었어요.

• tsconfig.json의 "type": "module" 설정 시, 모든 .js 파일은 ES 모듈로 간주되며, 이 경우 require를 사용할 수 없고 import를 사용해야 합니다.
• TypeScript 컴파일러의 "module" 옵션을 ES 모듈로 설정하면, 컴파일된 JavaScript 코드가 ES 모듈 형식으로 출력됩니다.
• 만약 TypeScript를 컴파일하여 CommonJS 모듈로 출력하고, package.json에 "type": "module"을 설정하면, 모듈 시스템이 충돌하여 오류가 발생할 수 있습니다

아하 package.json 에 있는 module은 cjs, mjs인지 정하는 옵션이고

tsconfig.json에 있는 module은 컴파일 되었을 때 어떤 module로 나오게 할 지 정하는 거 였어요.

 

🟩 cjs, mjs란 뭐죠?

🟨 cjs(CommonJs)

- nodejs에서 사용하는 모듈 시스템이에요. 

- require와 module.exports를 사용해요

- 파일 확장자는 .cjs, js 를 써요.

 

🟨 mjs(Es Module)

- ECMAscript 표준 모듈 시스템이에요.

- 브라우저, nodejs에서 지원되요.

- import 와 export 를 써요

- 파일 확장자는 .mjs 또는 pacakage.json의 type: module 설정된 .js 파일을 써요.

 

즉 package.json에 설정을 안하면 .js는 기본적으로 Commonjs로 되요.

왜 2개의 모듈시스템으로 나눠놨을까요. 통일 하면 좋겠는데 😅 

 

 

🟦 d.ts 파일은 뭐지?

타입스크립트 패키지들은 대부분 d.ts 파일을 가지고 있어요. 이게 뭐냐면 타입 정의(declare type 파일이에요.

이 파일은 타입만 선언하게 되어있어요. 바로 떠오른 것이 java의 interface 와 비슷한 계념이라고 이해했어요.

 

예시로 myLibrary.js 파일을 보면

 

myLibrary.d.ts

declare module 'myLibrary' {
  export function greet(name: string): string;
}

 

myLibrary.js

function greet(name) {
  return `Hello, ${name}!`;
}

module.exports = { greet };

 

느낌이 오시나요? d.ts파일을 보고  greet(name: string): string; 이라는 함수가  있을 거라고 예상 할 수 있어요.