2023 - 07 - 20 타입스크립트 .d.ts 파일, types, JSDoc

 

오늘 배운것. 타입스크립트 TypeScript => .d.ts

 

.d.ts 파일로 TypeScript 컴파일러는 다음과같은 사항을 알 수 있다.

1. 외부 라이브러리 함수 타입 정보

2. 외부 라이브러리 클래스 타입 정보

3. 외부 라이브러리 객체 타입 정보

4. 외부 라이브러리의 타입 추론 ( 타입이 명시되지 않았을 때, 컴파일러가 알아서 해당 타입에 대한 추론을 함)

 

JavaScript 라이브러리를 TypeScript에서 사용하는법.

1. Node.js 프로젝트 생성
npm init -y


2. tsconfig.json을 생성하여 TypeScript 프로젝트로 변환
tsc --init 


3. tsconfig.json을 열어서 아래의 옵션을 주석 해제하여 true로 설정
"allowJs": true // TypeScript 프로젝트에 JavaScript 파일 허용 여부
"checkJs": true // JavaScript 파일 타입 체크 여부

4. TypeScript에서 사용하고 싶은 커스텀 JavaScript 라이브러리(test.js)를 만듦
아래의 주석문은 JSDoc라고 하는데, 이는 API의 시그니처 (인자, 리턴타입)을 설명하는 HTML 문서생성기이다.

/**
 * @param {number} a
 * @param {number} b
 * @returns {number}
 */
export function add(a, b) { // export를 넣지 않으면 import 할 수 없는 것 아시죠?
  return a + b;
}

5. JSDoc으로 타입 힌트가 제공된 test.js의 .d.ts 파일 생성
npx tsc test.js --declaration --allowJs --emitDeclarationOnly --outDir types


6. types/test.d.ts 파일을 확인하면 다음과 같이 생성이 되어 있음.
/**
 * @param {number} a
 * @param {number} b
 * @returns {number}
 */
export function add(a: number, b: number): number;



7. test.js 파일을 참조할 foo.ts 파일을 새로 만듦
import { add } from "./test";
console.log(add(1, 2));



8. foo.ts 파일 실행. 실행시 3이라는 숫자가 뜨며, 정상적으로 실행됨
npx ts-node foo.ts