如何安装谷歌地图的Typescript类型

Question

怎么做 - 我尝试过组合

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

并最终得到此错误的变化

打字ERR!消息无法在注册表中找到"npm"的"googlemaps".

根据Amy的建议,我也下载到相关目录并添加

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

到我的main.d.ts(一个明显被阅读的文件,因为我没有得到其他错误).

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

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

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

Answer 1

因此,这个例外的原因是需要从应用程序包中单独下载地图脚本.这不是你典型的npm install地方,你得到你的.js和.ts包装好的消费.

TLDR:可以通过npm安装打字,但必须通过<script>标签下载.js脚本(对于SPA,这个标签可以即时附加到您的网页,以改善您的应用程序的初始加载时间,这就是我做).

我推荐的路径如下:

安装

npm install --save @types/googlemaps

进口

import {} from 'googlemaps';

加载和使用(此功能确保地图脚本仅附加到页面一次,以便可以反复调用它)

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中并放入我的地图组件路由解析器中.

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

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

摆脱警告:@types/googlemaps/index.d.ts' is not a module.

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

declare module 'googlemaps';

更新01.06.2018(@DicBrus的调查结果):

为了导入谷歌命名空间并摆脱恼人的错误"无法找到命名空间'谷歌'"你应该确保你已经导入了命名空间定义 @types/googlemaps

有两种方法可以做到:
1.三重斜杠指令

/// <reference path="<relevant path>/node_modules/@types/googlemaps/index.d.ts" />

工作得很好,但不那么优雅.

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

2. 确保它已导入tsconfig.json,因为它是导入的,您不需要另外导入

详细手册如下:https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

你应该检查以下两个小节compilerOptions: typeRoots和types

默认情况下,除非您准确指定了所需的类型定义,否则将导入node_modules/@ types下的所有类型定义.

在我的特定情况下,我有以下部分:

"types": []

它禁用自动包含@types包.

删除此行重新解决了我的问题,并添加了三重斜杠指令帮助.但我选择了第二种解决方案.

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

Answer 2

在实践中,我的用例是Angular CLI,我需要的只是

npm install --save @types/google-maps

Answer 3

我在离子2项目上测试了这些步骤,它完美地运行:

1. 全球安装打字:

npm install typings --global

2. 通过打字安装google.maps

typings install dt~google.maps --global --save

3. 打开tsconfig.json并将" typings /*.d.ts"添加到"include"数组中,如下所示(tsconfig.json).

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5"
  },
  "include": [
    "src/**/*.ts",
    "typings/*.d.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

Answer 4

typings install google.maps --global

您需要--global(以前是--ambient)标志来搜索DefinitlyTyped

Answer 5

截至目前,正确的安装方式是:

typings install dt~google.maps --global [--save]

Answer 6

至于打字稿2

npm install --save @types/googlemaps

将typeroots添加到您的tsconfig

{
  "compilerOptions": {
    "typeRoots": ["./node_modules/@types/"]
  }
}

Answer 7

我的解决方案（适用于Vue2.x）：

安装

npm install --save @types/googlemaps

将脚本添加到index.html

npm install --save @types/googlemaps

在根文件夹类型/index.d.ts中创建

将以下几行放在这里：

<script src="https://maps.googleapis.com/maps/api/js?key=XXX&libraries=YYYY"></script>

打开tsconfig.json并将“ types / *。d.ts”添加到“ include”数组中。

/// <reference path="../node_modules/@types/googlemaps/index.d.ts" />
declare module 'googlemaps';

Answer 8

斯蒂芬保罗清楚地解释了一切，但有一些重要的事情要提。tsconfigs 可以相互扩展。并且扩展一个可以覆盖父一个。就我而言，我在 app 目录下有另一个 tsconfig.app.json

types: []

数组。正如斯蒂芬已经解释过的，这个空数组覆盖了 typeRoots。因此，只需删除所有相关 tsconfig 文件中的所有类型数组并确保

"typeRoots": ["node_modules/@types"]

存在。不用说必须安装@types@googlemaps

Answer 9

最简单的方法是使用三斜线指令。幸运的是，有一种替代语法可以利用标准包解析：

 /// <reference types="googlemaps" />

Answer 10

我努力在窗口上定义google对象，最后通过扩展Window接口找到了一个好方法。

只需使用以下google-maps.d.ts命令创建一个文件：

import '@types/googlemaps';

declare global {
  interface Window {
    google: typeof google;
  }
}

并把它添加到一个名为目录types在你的根文件夹。然后指向文件中的该文件夹tsconfig.json。

// tsconfig.json
compilerOptions: {
   ...
   "typeRoots": [
     "node_modules/@types",
     "types"
   ],
   ...
}