JavaScript库的.d.ts打字稿文件

Question

I'm trying to create a description file to use a javascript library with typescript.

At the moment I'm trying to follow those guides: TypeScript Official website and Medium guide to migrate to typescript

To be specific I'm trying to create a typescript description file for leaflet-icon-pulse , which I thought was simple enough to start with

So I downloaded the git project, created tsconfig.json as follows

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

Then I tried to convert the file L.Icon.Pulse.js to L.Icon.Pulse.ts , but I started getting error like:

Property X does not exists on type Y

So as far as I understood I need to let the js be and simply create a L.Icon.Pulse.d.ts file

Right now mine looks like:

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

But now I have no idea how to precede, and I was not able to find a good tutorial or example on how to go on.

Someone can give me some tips on how to procede?

Thanks!

Answer 1

Instead of creating the d.ts file, I would maybe go on by ignoring the typescript errors.

So, you install leaflet-pulse-icon through npm:

npm install leaflet-pulse-icon

...and you include it in your component:

import 'leaflet-pulse-icon';

To avoid the error, just make TypeScript ignore the typings for a while.. So, instead of:

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

You should use:

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

...using L as "of any type" variable.

Of course, TypeScript should not work without types(!) but occasionally, I find it convenient to bypass some errors using the ":any" way.