[컴] @types 가 없는 node module 에 대해 .d.ts file 설정 및 만들기

 typescript type 없는 모듈 라이브러리 library 에 대한 types type 만들기

/@types 가 없는 node module 에 대해 .d.ts file 설정 및 만들기

update : 2024-04-26

방법

1. tsconfig.json 에서 noImplicitAny 를 추가 : 이것으로 /@types 가 제대로 설정됐는지 알 수 있다.
2. src/@types/<module_name>/index.d.ts 만들기: src/@types 안에 type file 을 넣는다.
3. "typeRoots": ["src/@types"] 라고 넣어준다. 안넣어주면 인식하지 못했다.

{
  "compilerOptions": {
    ...
    "noImplicitAny": true,
    "sourceRoot": "src",
    "typeRoots": ["src/@types/"],
  },
}

index.d.ts

만약 vue-material 이란 library(module) 에 대한 index.d.ts 를 만드는 것이라면 아래처럼 한다.

좀 더 자세한 내용은 추후에 작성하려 한다. 일단 ref. 2 을 참고하자.

declare module 'vue-material' {

  import _Vue from "vue";

  declare const VueMaterial: Plugin_2;
  export default VueMaterial;

}

dts-gen

결과적으로 이 방법은 내가 원하는 library 였던 vue-materials 에 대한 .d.ts 는 만들어주지 못했다.

사용법

• GitHub - microsoft/dts-gen: dts-gen creates starter TypeScript definition files for any module or library.

아래처럼 dts-gen 과 type 만들기를 원하는 package 를 global 로 설치하고, dts-gen -m package-name 을 실행하자.

주의할 점은 dts-gen, type 을 만드려는 package 모두 global 로 설치해야 된다.

npm i -g dts-gen
npm i -g <package_name>

// 생성
dts-gen -m <package_name>

Reference

1. Migrating to Typescript: Write a declaration file for a third-party NPM module | by Chris Thompson | Medium, 2017-04-13
2. reactjs - TypeScript custom declaration files for untyped npm modules - Stack Overflow