如何在没有TypeScript定义的情况下导入npm包，以便IDE仍然提供智能感知

Question

我使用了一个没有TypeScript类型定义的npm包。确切地说，我使用的是react-google-maps库。

按照上面的例子，我从包中导入了以下组件:

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

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

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

因此，我的快速修复方法是声明模块的成员类型为"any":

declare module "react-google-maps" {
    export var GoogleMapLoader:any;
}

现在，问题是，然而，我的IDE (WebStorm)不再提供智能感知。GoogleMapLoader甚至不被识别为一个反应组件，我相信如果我使用Babel，它会被识别(至少是没有类型的方法和属性)。

我如何导入没有类型定义的npm包来由TypeScript编译器解析，但又不妨碍IDE提供智能感知?

Answer 1

你需要声明你使用的是什么，而不是仅仅使用any。

例如:

declare module "react-google-maps" {
    interface GoogleMapLoaderProps {
        ....
    }
    interface GoogleMapLoaderState {
        ....
    }
    class GoogleMapLoader extends React.Component<GoogleMapLoaderProps, GoogleMapLoaderState> { }
}

您可以从您正在使用和需要IDE支持的内容开始，然后慢慢添加。
您可以查看如何编写声明文件以获取更多信息。