如何导入没有TypeScript定义的npm包，让集成开发环境仍然提供智能感知？

Question

我使用了一个npm包，它没有TypeScript的类型定义。准确地说，我使用的是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;
}

然而，现在的问题是，我的集成开发环境(WebStorm)不再提供智能感知。GoogleMapLoader甚至没有被识别为react组件，我相信如果我使用的是Babel，它就会被识别(至少是没有类型的方法和属性)。

如何导入没有类型定义的npm包供TypeScript编译器解析，同时又不妨碍集成开发环境提供智能感知？

Answer 1

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

例如：

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

    interface GoogleMapLoaderState {
        ....
    }

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

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

您可以查看Writing Declaration Files，了解有关如何执行此操作的更多信息。