Feat/migrate to ts

[itseasy21]

No description provided.

[Copilot]

Pull Request Overview

This PR migrates the react-leaflet-draw-next library from JavaScript to TypeScript. The migration converts the main component to TypeScript, adds comprehensive type definitions, and updates the build configuration to support TypeScript compilation.

• Replaces JavaScript implementation with TypeScript equivalents using proper type annotations
• Adds comprehensive type definitions for Leaflet draw events and control options
• Updates build toolchain to use TypeScript compiler and ts-loader instead of Babel

Reviewed Changes

Copilot reviewed 11 out of 14 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
webpack.config.js	Adds TypeScript file extensions and ts-loader configuration
src/types.ts	Defines comprehensive TypeScript interfaces for draw events and control options
src/index.ts	Updates entry point to export TypeScript types
src/EditControl.tsx	Complete TypeScript rewrite of the main component with proper type annotations
src/EditControl.js	Removes the original JavaScript implementation
package.json	Updates build scripts and types path for TypeScript compilation
examples/class/webpack.config.js	Configures example webpack for TypeScript support
examples/class/tsconfig.json	Adds TypeScript configuration for examples
examples/class/index.tsx	Converts example entry point to TypeScript
examples/class/edit-control.tsx	Converts example component to TypeScript with proper typing
examples/class/edit-control.js	Removes original JavaScript example

[Copilot]

The type assertion (onCreated as unknown as (e: L.LeafletEvent) => void) is unnecessarily complex and unsafe. Since onCreated is already properly typed in the interface, you can call it directly: onCreated && onCreated(e);

Suggested change

	onCreated && (onCreated as unknown as (e: L.LeafletEvent) => void)(e);
	onCreated && onCreated(e);

[Copilot]

The type assertion featureGroup as unknown as L.FeatureGroup is unsafe and could hide type mismatches. Consider using a more specific type guard or adjusting the generic type constraint to ensure type safety.

Suggested change

	featureGroup: featureGroup as unknown as L.FeatureGroup,
	featureGroup: featureGroup as L.FeatureGroup<L.Layer>,

[Copilot]

The type assertion draw as L.Control.DrawOptions assumes the types are compatible without verification. Consider using a proper type guard or ensuring the DrawOptions interface properly extends L.Control.DrawOptions to avoid potential runtime issues.

Suggested change

	options.draw = { ...(draw as L.Control.DrawOptions) };
	if (isDrawOptions(draw)) {
	options.draw = { ...draw };
	} else {
	// Optionally, warn or throw if draw is invalid
	if (process.env.NODE_ENV !== 'production') {
	// eslint-disable-next-line no-console
	console.warn('draw prop does not conform to L.Control.DrawOptions:', draw);
	}
	}

[Copilot]

The type assertion as unknown as L.FeatureGroup | undefined is overly broad and unsafe. Consider using a more specific type assertion or checking the actual type at runtime to ensure type safety.

Suggested change

	const fgInstance = this.featureGroupRef.current as unknown as L.FeatureGroup | undefined;
	const fgInstance = (this.featureGroupRef.current instanceof L.FeatureGroup)
	? this.featureGroupRef.current
	: undefined;

[Copilot]

Using as any defeats the purpose of TypeScript type checking. Consider using a properly typed ref or a more specific type assertion to maintain type safety.

Suggested change

	<FeatureGroup ref={this.featureGroupRef as any}>
	<FeatureGroup
	ref={(ref) => {
	// Assign both the class ref and _editableFG for compatibility
	(this.featureGroupRef as React.MutableRefObject<L.FeatureGroup | null>).current = ref;
	this._editableFG = ref;
	}}
	>

[Copilot]

Using (fgInstance as any)._leaflet_id to access private Leaflet properties is fragile and defeats TypeScript's type safety. Consider using a proper type guard or checking if the instance has the expected properties through a safer approach.

Suggested change

	{fgInstance && (fgInstance as any)._leaflet_id && (
	{fgInstance && '_leaflet_id' in fgInstance && (

[Copilot]

Using as any to access the toGeoJSON() method bypasses TypeScript's type checking. Consider properly typing _editableFG or using a type assertion that maintains some level of type safety.

Suggested change

	const geojsonData = (this._editableFG as any).toGeoJSON();
	const geojsonData = (this._editableFG as L.FeatureGroup).toGeoJSON();