JavaScriptライブラリ用の.d.ts TypeScriptファイル

私はTypeScriptでJavaScriptライブラリを使用するための説明ファイルを作成しようとしています。

現在、私はこれらのガイドに従おうとしています：TypeScript公式ウェブサイトとMediumのTypeScriptへの移行ガイド

具体的には、私は leaflet-icon-pulse のための TypeScript 説明ファイルを作ろうとしており、最初の取り組みとして十分に簡単だと思いました

それで、私はgitプロジェクトをダウンロードし、次のようにtsconfig.jsonを作成しました

{
"compilerOptions": {
  "outDir": "./built",
  "allowJs": true,
  "noImplicitAny": true,
  "strictNullChecks": true,
  "target": "es5",
  "module": "commonjs"
},
"include": [
  "./src/**/*"
],
"exclude": [
  "node_modules"
]
}

それから、ファイル L.Icon.Pulse.js を L.Icon.Pulse.ts に変換しようとしましたが、次のようなエラーが出始めました:

Property X does not exists on type Y

私が理解した限りでは、jsはそのままにしておいて、単純にL.Icon.Pulse.d.tsファイルを作成する必要があります

今、私のはこんな感じです:

import * as L from 'leaflet';
declare module 'leaflet' {
     function Pulse(options?: any): any;
}

しかし今、私はどう進めるべきか全くわからず、どのように進めるかについての良いチュートリアルや例を見つけることもできませんでした。

誰か、どのように進めればいいかのコツを教えてくれませんか？

ありがとう！

回答 #1

d.tsファイルを作成する代わりに、TypeScriptのエラーを無視して進めるかもしれません。

それで、npmを通じてleaflet-pulse-iconをインストールします:

npm install leaflet-pulse-icon

...そしてそれをあなたのコンポーネントに含めます:

import 'leaflet-pulse-icon';

エラーを回避するには、しばらくの間TypeScriptに型定義を無視させればよいです。ですので、次のようにする代わりに：

let pulsingIcon = L.icon.pulse({iconSize:[20,20],color:'red'});

あなたは使用すべきです:

let pulsingIcon = (L as any).icon.pulse({iconSize:[20,20],color:'red'});

...Lを「任意の型」の変数として使用する。

もちろん、TypeScriptは型なしでは動作すべきではありません(!) が、時々、「:any」を使っていくつかのエラーを回避するのが便利だと感じることがあります。