AMD+RequireJS项目中Leaflet @types出现TS2451重复声明错误求助

Hey there, let's tackle this TS2451 error you're facing with Leaflet and leaflet-editable's type definitions. I've run into similar issues with AMD/RequireJS setups before, so here are some actionable fixes to try:

1. Narrow down TypeScript's type scanning scope #

The error often happens because TypeScript automatically pulls in all @types packages in your project, leading to duplicate global L declarations. Fix this by explicitly listing only the types you need in your tsconfig.json:

{
  "compilerOptions": {
    // ... your existing config
    "types": ["leaflet", "leaflet-editable"],
    // Ensure typeRoots isn't causing duplicate scans (default is usually fine)
    "typeRoots": ["node_modules/@types"]
  }
}

This tells TypeScript to only load these specific type packages instead of scanning every @types directory.

2. Use module-style imports instead of global declarations #

Even with AMD/RequireJS, you can guide TypeScript to treat Leaflet as a module rather than a global variable, avoiding conflicts. Update your code imports like this:

import * as L from 'leaflet';
import 'leaflet-editable'; // This extends L's types without redeclaring the global

Make sure your tsconfig.json has these settings to match your AMD setup:

{
  "compilerOptions": {
    "module": "amd",
    "moduleResolution": "classic" // Or "node" if your setup supports it
  }
}

3. Verify version compatibility of type packages #

Mismatched versions between @types/leaflet and @types/leaflet-editable can cause duplicate declarations. Check your package.json to ensure the type versions align with the actual Leaflet/leaflet-editable versions you're using. For example:

• If you're using Leaflet 1.9.x, make sure @types/leaflet is also 1.9.x
• @types/leaflet-editable should be compatible with your Leaflet type version

If versions are off, upgrade or downgrade the type packages to match.

4. Create custom type extensions to avoid conflicts #

If the above steps don't work, you can manually extend Leaflet's types instead of relying on the conflicting @types/leaflet-editable package. Create a file like custom-leaflet-types.d.ts with:

import * as L from 'leaflet';

// Extend Leaflet's Map interface with editable methods
declare module 'leaflet' {
  interface Map {
    editable(): any; // Replace `any` with actual type definitions if needed
    enableEdit(): void;
    disableEdit(): void;
    // Add other leaflet-editable methods/properties here
  }
}

Then add this file to the include array in your tsconfig.json, and remove leaflet-editable from the types array.

5. Double-check RequireJS shim configuration #

Even though your app runs, TypeScript might be confused by how RequireJS loads dependencies. Ensure leaflet-editable is properly shimmed to depend on Leaflet:

requirejs.config({
  paths: {
    'leaflet': 'path/to/leaflet',
    'leaflet-editable': 'path/to/leaflet-editable'
  },
  shim: {
    'leaflet-editable': {
      deps: ['leaflet'],
      exports: 'L'
    }
  }
});

This helps TypeScript understand the dependency chain and reduces false duplicate declaration errors.

内容的提问来源于stack exchange，提问作者mindparse