Important: Despite extensive searching, I have been unable to find a resolution to my issue.
My current endeavor involves developing a map library through the extension of leaflet. However, it appears that I am encountering difficulties with utilizing js libraries in general. I have opted to employ webpack and ts-loader for generating the output file.
I have taken steps to install type definitions such as @types/geojson and @types/leaflet, which have been relocated to the modules folder.
Below is an example of my Test1.ts file :
import * as L from './modules/@types/leaflet/index';
import { MyDataItem } from './MyDataItem ';
export class Test1 {
text: string;
data: MyDataItem ;
latLng: L.LatLng;
constructor(theName: string) {
this.data = { name: theName} as MyDataItem ;
}
public show() {
console.log(this.data.name);
}
public showLatLng() {
this.latLng = new L.LatLng(22, 55);
console.log(this.latLng);
}
}
module.exports = {
Test1: Test1
}
In my webpack configuration, I have specified library:'lib' under the output option.
Subsequently, I invoke the following methods directly from the browser console:
> (new lib.Test1("aa")).show() // outcome: aa
> (new lib.Test1("aa")).showLatLng() // error : L.LatLng is not a constructor
// or if webpack optimization:minimize is set to true, the error reads: i.LatLng is not a constructor
To address this issue, I have included leaflet.js on the page so that typeof(L.latLng) returns "function" (with lowercase letters).
Question: It seems evident that the types sourced from leaflet are no longer accessible post-generation of the js files. My initial belief was that by creating a TypeScript declaration file (.d.ts) for any given JavaScript library, one could effectively integrate said library into TypeScript files. What may I be overlooking here? How can I successfully include and utilize standard JavaScript libraries within a TypeScript file, ensuring their functionality remains intact after bundling via webpack?