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

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;
}

但是，现在的问题是我的 IDE (WebStorm) 不再提供智能感知。 GoogleMapLoader 甚至没有被识别为 react 组件，我相信如果我使用 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有关如何执行此操作的更多信息。