如何在没有 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 支持的内容开始，然后慢慢添加。
您可以查看Writing Declaration Files 了解更多信息。