Javascript 如何在没有TypeScript定义的情况下导入npm包，以便IDE仍然提供intellisense？

我使用的是一个npm包，它没有TypeScript的类型定义。确切地说，我使用的是

react谷歌地图

library

按照他们的示例，我从包中导入了以下组件：

import {GoogleMapLoader, GoogleMap, Marker} from "react-google-maps";

但是，TypeScript在编译过程中抛出一个错误：

error TS2305: Module '"react-google-maps"' has no exported member 'GoogleMapLoader'.

因此，我对这一问题的快速解决方案是对模块的声明，其成员类型为“any”：

然而，现在的问题是，我的IDE（WebStorm）不再提供intellisense

GoogleMapLoader

甚至没有被识别为react组件，我相信如果我使用Babel的话，它会被识别（至少在没有打字的情况下是方法和属性）

---

我如何导入没有类型定义的npm包以供TypeScript编译器解析，又不妨碍IDE提供intellisense？

您需要声明您正在使用的内容，而不是仅使用

任何

例如：

declare module "react-google-maps" {
    interface GoogleMapLoaderProps {
        ....
    }

    interface GoogleMapLoaderState {
        ....
    }

    class GoogleMapLoader extends React.Component<GoogleMapLoaderProps, GoogleMapLoaderState> { }
}

声明模块“反应谷歌地图”{
界面GoogleMapLoaderProps{
....
}
GoogleMapLoaderState接口{
....
}
类GoogleMapLoader扩展了React.Component{}
}

您可以从您正在使用的和需要IDE支持的内容开始，然后慢慢添加内容。

---

您可以查看以获取有关如何操作的更多信息。

尝试，

首选项

->

语言和框架

->

JavaScript

->

库

->

添加

，并将您的npm模块添加为库。@SergeyPanfilov我已在您提到的节点模块中添加了

react google map

文件夹，但我还是不能理解这个模块。还有什么我可能漏掉的吗？@SergeyPanfilov你的建议与打字无关。编译器没有查询WebStorm配置的库。

react google map

不是我写的。这是我安装的一个npm包。所以，如果我想在IDE中为这个包提供intellisense，我必须为它编写整个定义文件？有没有一种方法，在不编写每个属性和方法定义的情况下，IDE仍然可以识别包中的类、方法和属性，而不需要像我使用ES5/ES6那样的类型？不，不是真的。IDE并不是真正的问题，因为IDE只是将编译器用作服务。您需要编译器了解发生了什么，然后IDE也会知道。定义文件（在大多数情况下）不是由库的制造商提供的，因此其他人（用户）编写

.d.ts

文件并更新不同的存储库（例如

DefinitelyTyped

）。您可以选择在没有IDE支持的情况下使用

any

，或者自己编写一个。您不必为整个库编写定义，只需编写所需的部分。嗯。。。但如果我不使用Typescript，我至少会有基本的智能感觉吗？我的意思是，如果我改用Babel或普通的旧ES5，它一开始没有任何定义文件，webstorm仍然会基于包中编写的任何类成员、函数/变量为我提供基本的智能感知。但对于“any”类型脚本定义，似乎我已经覆盖了对这些函数/变量的任何识别，并且我从IDE获得了零支持？这就像一个“编写定义”或“完全没有智能感知”的场景？我没有足够的经验在WebStorm中只使用js，而且我从未与Babel合作过，所以我不能真正回答这个问题。但是说到这里，您添加了环境声明，因为您遇到了一个ts错误，您通过将

GoogleMapLoader

定义为

any

类型的

var

来解决这个问题，所以从那时起，您将得到。。因为您使用的是ts，所以您需要消除该错误，这是无法避免的（我知道）。

declare module "react-google-maps" {
    interface GoogleMapLoaderProps {
        ....
    }

    interface GoogleMapLoaderState {
        ....
    }

    class GoogleMapLoader extends React.Component<GoogleMapLoaderProps, GoogleMapLoaderState> { }
}