[TS] : .d.ts

 

@types 라이브러리

TS 는 @types 라이브러리를 이용해서 외부 라이브러리에 대한 타입 정보를 제공한다 !!

위에 있는 수많은 라이브러리의 디렉토리에 들어가보면

엄청나게 많은 .d.ts 파일들을 볼 수 있다.

 

.d.ts ? 

위 파일은 JS의 라이브러리를 TS의 코드에서 사용할 수 있게 해주는 녀석이다.

import 하고싶은 JS 의 라이브러리가 있다면 해당 라이브러리가 어떤 타입정보를 사용하는지 .d.ts 파일이 타입을 정의해 주는 것이다.
그렇게 TS 에서 JS의 라이브러리를 사용할 수 있게 된다.

.d.ts 파일을 통해 tsc 는 다음 정보를 알 수 있다.

• 외부 라이브러리의 함수 타입 정보
• 외부 라이브러리 클래스 타입 정보
• 외부 라이브러리 객체 타입 정보

그러니 JS에서 사용하는 라이브러리를 TS에서 사용하려면 해당 라이브러리에 대한 .d.ts 파일을 제공해주면 된다.
TS 프로젝트에서도 JS 라이브러리를 한 줄도 수정하지 않고 그대로 쓸 수 있다.

 

JS 라이브러리를 TS 프로젝트에서 사용하기

1. node 프로젝트 생성

npm init -y

 

2. tsconfig.json 을 생성하여 TS 프로젝트로 변환

tsc --init

 

3. 생성된 tsconfig.json 에서 설정 옵션 주석 해제하기.

"allowJs": true // TypeScript 프로젝트에 JavaScript 파일 허용 여부
"checkJs": true // JavaScript 파일 타입 체크 여부

 

4. TS 에서 사용하고 싶은 커스텀 JS 라이브러리를 만들어 둔다.

/**
 * @param {number} a
 * @param {number} b
 * @returns {number}
 */
export function add(a, b) {
  return a + b;
}

위에 사용한 주석문은 JSDoc 이다.

JSDoc 은 API의 인자 , 리턴타입을 설명하는 html 문서 생성기이고,
JSDoc 을 통해서 우리는 JS 소스코드에 대한 타입힌트를 제공할 수 있다.

위 JSDoc 해석은 parma에 들어가는 a와 b의 타입을 중괄호안의 number로 명시, retunr 값 또한 number로 명시를 한다는 뜻이다.

 

5. JSDoc으로 타입 힌트가 제공된 JS파일의 .d.ts 파일을 만든다.

npx tsc 01.js --declaration --allowJs --emitDeclarationOnly --outDir types

해당 명령어를 통해서 type라는 폴더가 생성되었고 그 안에 01.d.ts 파일이 생성된걸 확인했다.

 

6. 해당 라이브러리를 사용할 TS 파일 생성

// 01.ts

import { add } from './01'; // 01.js export 함수인 add 가져옴
console.log(add(1, 2));

이렇게 하니 오류가 발생했다.

오류 내용은 현재 add 를 export 해주는 JS 파일명도 01.js 이며, JS 라이브러리를 사용할 TS 파일명 또한 01.ts 이므로 발생한 오류인 것 같다.

ts 파일명을 변경해보자

01.ts 를 test.ts로 파일명을 변경하니 위의 오류는 해결이 되었다.

 

근데 또 다른 오류가 출력 되었다.

01.ts 파일을 찾을수 없다고 한다.

 

tsconfig.json 파일에 include 옵션을 추가했다.

include 는 최상위 옵션이기 때문에 다음과 같이 작성해주어야 한다.

{
  "include": [
    "TS/test.ts",
    "src/**/*.ts"
  ],
  "compilerOptions": {
	...
  }
}

그래도 해결이 되진 않았다.

 

위 오류를 여러 사람들에게 물어봤지만, 해결을 하지 못했다.

다만 코드상에서 실행시에 문제되는 부분이 없었고, 위 오류는 IDE 자체의 문제가능성일 경우가 높은걸로 판단이 된다.

 

7. TS 파일을 실행해본다.

npx ts-node test.ts

 

출력 값

3

 

 

 

#d_ts #JS라이브러리를 #TS에서도 #사용해보자 #같은파일명 #오류 #해결 #include #최상위옵션 #tsconfig_json