TypeScript尝试导入类型定义而不是主模块

问题描述

我正在尝试通过DefinitelyTyped导入模块以及其类型定义包中的某些类型。我都安装了：

npm i -D leaflet
npm i -D @types/leaflet

（这将是一个小叶插件，需要将小叶作为peerDependency，因此在小叶本身上是-D。

在.ts文件的顶部，我尝试导入这些文件：

import L from 'leaflet';
import type { LatLng } from 'leaflet'

但是打字稿告诉我Module '"/Users/seth/Documents/GitHub/leaflet-topography/node_modules/@types/leaflet/index"' has no default export.ts(1192)。没错，但是我不是在尝试从类型定义中导入L，而是从Leaflet包本身中导入。为什么打字稿假设这是一个类型定义？我该如何更改，以使我要导入的L是传单库本身？

解决方法

取决于构建引擎/ TypeScript编译器的配置方式，您可能需要将其编写为：

import * as L from "leaflet";

,

为什么打字稿假定这是一个类型定义？

整个目的d.ts文件或类型Declaration files的目的是为打字稿提供有关用JavaScript编写的API的类型信息。您仍在阅读leaflet包，但是打字稿编译器会寻找用于API的类型定义文件，以便在打字稿平台下工作。这将有助于使用d.ts文件中定义的类型注释的所有静态类型分析的打字稿。

当您安装@typings传单时，它将成为打字稿生态系统的一部分。

我该如何更改，以使我要导入的L是传单 库本身？

如上所述，打字稿将为传单API寻找类型定义文件，该文件实际上是在调用传单API详细信息。

根据传单类型的定义，文件L是一个命名空间，没有默认的导出。因此，您必须按如下所示导入此命名空间-

import * as L from 'leaflet';

如果您要从传单中导入任何特定的类，则可以使用以下语法-

import { Circle } from 'leaflet'; //**NOTE DON'T MISS THE CURLY BRACES**

解决该错误的其他方法是更改​​tsconfig.json文件中的设置

"allowSyntheticDefaultImports": true /* Allow default imports from modules with no default 
 export. This does not affect code emit,just typechecking. */