如何为谷歌地图安装 Typescript 类型 [英] How to install Typescript typings for google maps

问题描述

怎么做 - 我试过组合

How can it be done - I've tried combinations of

typings install [googlemaps | google.maps] [--ambient] --save

并最终出现此错误的变化

and end up with variations on this error

打字错误！消息无法在注册表中找到npm"的googlemaps".

typings ERR! message Unable to find "googlemaps" for "npm" in the registry.

根据艾米的建议，我也下载到相关目录并添加了

Per Amy's suggestion, I've also download to the relevant directory and added

/// <reference path="main/ambient/google.maps/google.maps.d.ts" />

到我的 main.d.ts(一个文件，因为我没有收到其他错误，所以显然正在被读取).

to my main.d.ts (a file which is clearly being read as I don't get other errors).

我在网上找不到任何可以回答问题的内容

And I can't find anything on the web to answer the question

我的最终目标是摆脱这种错误

My end goal is to get rid of this sort of error

错误 TS2503:找不到命名空间google".

error TS2503: Cannot find namespace 'google'.

推荐答案

因此，这个特殊之处在于地图脚本需要从您的应用程序包中单独下载.这不是典型的 npm install，您可以在其中将 .js 和 .ts 很好地打包以供使用.

So what makes this exceptional is that the maps script needs to be downloaded separately from your app bundle. It's not your typical npm install where you get your .js and .ts nicely packaged for consumption.

TLDR:typings 可以通过 npm 安装，但 .js 脚本必须通过 <script> 标签下载(对于 SPA，这个标签可以附加到即时更新您的网页，以缩短应用的初始加载时间，这正是我所做的).

TLDR: the typings can be installed via npm but the .js script must be downloaded via a <script> tag (for SPAs this tag can be appended to your web page on-the-fly to improve initial load time of your app, which is what I do).

我推荐的路径如下:

安装

npm install --save-dev @types/googlemaps

导入

import {} from 'googlemaps';

加载&使用(此函数确保地图脚本只附加到页面一次，以便可以反复调用)

Load & Use (this function makes sure the maps script is only appended to the page once, so that it can be called over and over)

addMapsScript() {
  if (!document.querySelectorAll(`[src="${googleMapsUrl}"]`).length) { 
    document.body.appendChild(Object.assign(
      document.createElement('script'), {
        type: 'text/javascript',
        src: googleMapsUrl,
        onload: () => doMapInitLogic()
      }));
  } else {
    this.doMapInitLogic();
  }
}

请记住，必须将地图脚本附加到页面，并且必须在发生任何其他事情之前下载该脚本.例如，如果您使用的是 Angular，我会将 addMapsScript() 逻辑包装在一个 observable 中，并放入我的地图组件路由解析器中.

使用类型(类型定义包括但不限于):

Use the types (Type definitions include, but are not limited to):

const mapRef: google.maps.Map;
const bounds: google.maps.LatLngBounds;
const latLng: google.maps.LatLng;

摆脱警告:@types/googlemaps/index.d.ts' 不是模块.

在您的项目根目录中添加一个名为 index.d.ts 的文件并插入以下内容:

Add a file at your projects root directory called index.d.ts and insert the following:

declare module 'googlemaps';

---

---

2018 年 6 月 1 日更新(@DicBrus 的发现):

为了导入google命名空间并摆脱烦人的错误无法找到命名空间'google'"您应该确保已在 @types/googlemaps

In order to import google namespaces and get rid of annoying error "Cannot find namespace 'google'" you should ensure that you've imported namespace definitions in @types/googlemaps

有两种方法:

1. 三斜线指令

1. triple-slash directive

////node_modules/@types/googlemaps/index.d.ts"/>工作正常，但不够优雅.

/// /node_modules/@types/googlemaps/index.d.ts" /> Worked fine, but not so elegant.

文档可以在这里找到:https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html

1. 确保它是在 tsconfig.json 中导入的，因为它是导入的，所以您不需要额外导入一些东西

1. Ensure that it is imported in tsconfig.json and since it is imported you do not need to import something additionally

详细手册在这里:https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

您应该检查 compilerOptions 下的两个小节:typeRoots 和 types

you should check two subsections under compilerOptions: typeRoots and types

默认情况下，node_modules/@types 下的所有类型定义都会被导入，除非您明确指定了您需要的内容.

By default all type definitions under node_modules/@types are imported unless you specified exactly what you need.

在我的特殊情况下，我有以下部分:

In my particular case I had following section:

"types": []

它禁止自动包含@types 包.

It disables automatic inclusion of @types packages.

删除这一行重新解决了我的问题，同时添加三斜线指令也有帮助.但我选择了第二种解决方案.

Removing this line re-solved issue for me, as well also adding triple-slash directive helped. But I chose the second solution.

至于空"导入，我没有找到任何解释它如何以及为什么起作用.我想它不导入任何模块或类，但它导入命名空间.此解决方案不适合我，因为 IDE 将此导入标记为未使用"；它可以很容易地移除.例如，webstorm 的命令 Ctrl+Alt+O - 美化代码并删除所有不必要的导入.

As for the "empty" import, I didn't found any explanation how and why it works. I suppose that it does NOT import any module or class, but it does import namespaces. This solution is not suitable for me, since IDE marks this import as "not used" and it can be easily removed. E.g, webstorm's command Ctrl+Alt+O - prettifies code and removes all unnecessary imports.

这篇关于如何为谷歌地图安装 Typescript 类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！