用于导入类型定义而不是主模块的 TypeScript 字符串

标签 typescript import leaflet definitelytyped

我正在尝试通过 DefinitelyTyped 导入一个模块,以及它的类型定义包中的一些类型。我安装了两个:

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

(这将是一个传单插件,需要传单作为 peerDependency,因此 -D 传单本身)。

.ts 文件的顶部,我尝试导入这些:

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

但是 typescript 告诉我 Module '"/Users/seth/Documents/GitHub/leaflet-topography/node_modules/@types/leaflet/index"' 没有默认的 export.ts(1192) .这是真的,但我不是要从类型定义中导入 L,而是从传单包本身导入。为什么 typescript 假设这是一个类型定义?我怎样才能改变它,以便我导入的 L 是传单库本身?

最佳答案

Why is typescript assuming that this is a type definition?

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

当你为 leaflet 安装 @typings 时,它将成为 typescript 生态系统的一部分。

How can I change that so that the L that I'm importing is the leaflet library itself?

如上所述,typescript 将查找 leaflet API 的类型定义文件,实际上是调用 leaflet 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. */

关于用于导入类型定义而不是主模块的 TypeScript 字符串,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64417328/

相关文章:

javascript - 在服务器上设置请求后,Cors 仍然阻止请求

javascript - Angular 4 : Table ng-if value equals row header

java - 为什么 Eclipse 不识别新的 JAR?

javascript - 在构造函数内部实例化变量和直接在类 + Typescript/Angular 中实例化变量有什么区别

javascript - 如何将值从一个表单组实时传递到另一个表单组作为响应式(Reactive)表单中的双向数据绑定(bind)?

amazon-web-services - 将排序后的数据一次性大量导入 Dynamo DB 有哪些经济高效的选项?

MySQL csv 导入增量减慢(替代方案?)

javascript - Leaflet.js 将按钮添加到标记弹出窗口

javascript - 传单是否可以使用多色折线

javascript - 在传单中单击标记时不生成 map 单击事件