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

时间：2016-03-17 15:16:12

标签： typescript

怎么做 - 我已尝试过

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

最终会出现此错误的变体

  

打字ERR！消息无法找到＆＃34; googlemaps＆＃34;为＆＃34; npm＆＃34;在注册表中。

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

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

到我的main.d.ts（由于我没有收到其他错误而被清楚阅读的文件）。

我无法在网上找到任何回答问题的内容

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

  

错误TS2503：无法找到命名空间＆＃39; google＆＃39;。

14 个答案:

答案 0 :(得分：70)

因此，这个例外的原因是需要从您的应用包中单独下载地图脚本。它不是典型的npm install，您可以将.js和.ts精心打包以供消费。

TLDR ：可以通过npm安装打字，但必须通过<script>标签下载.js脚本（对于SPA，此标记可以附加到您的网页上 - -fly用于改善应用程序的初始加载时间，这就是我的工作。

我推荐的路径如下：

安装 

npm install --save @types/googlemaps

导入 

import {} from 'googlemaps';

加载＆amp;使用（此功能可确保地图脚本仅附加到页面一次，以便可以一遍又一遍地调用它）

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的调查结果）：

为了导入谷歌命名空间并摆脱烦人的错误＆＃34;找不到命名空间＆＃39; google＆＃39;＆＃34;您应该确保在@types/googlemaps

中导入了名称空间定义

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

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

工作得很好，但不那么优雅。

可在此处找到文档：https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html

  1. 确保将其导入tsconfig.json，因为导入后您无需再导入其他内容

    2. 详细手册在此处：https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

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

    默认情况下，导入node_modules / @ types下的所有类型定义，除非您准确指定了所需的类型定义。

    在我的特定情况下，我有以下部分：

    "types": []

    它禁止自动包含@types包。

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

    至于＆＃34;空＆＃34;导入，我没有找到任何解释如何以及为什么它的工作原理。我认为它 NOT 导入任何模块或类，但它确实导入了命名空间。这个解决方案不适合我，因为IDE将此导入标记为＆＃34;未使用＆＃34;它可以很容易地删除。例如，webstorm的命令Ctrl + Alt + O - 美化代码并删除所有不必要的导入。

答案 1 :(得分：18)

实际上，我的用例是Angular CLI，我只需要

public class Singleton implements Parcelable {

    private String orderId;
    private String pickupAddress;
    private String contact;


    Singleton(String orderId,String pickupAddress,String contact){

        this.orderId = orderId;
        this.pickupAddress = pickupAddress;
        this.contact = contact;
    }

    protected Singleton(Parcel in) {
        orderId = in.readString();
        pickupAddress = in.readString();
        contact = in.readString();
    }

    public static final Creator<Singleton> CREATOR = new Creator<Singleton>() {
        @Override
        public Singleton createFromParcel(Parcel in) {
            return new Singleton(in);
        }

        @Override
        public Singleton[] newArray(int size) {
            return new Singleton[size];
        }
    };

    public String getOrderId() {
        return orderId;
    }

    public String getPickupAddress() {
        return pickupAddress;
    }

    public String getContact() {
        return contact;
    }

    @Override
    public int describeContents() {
        return 0;
    }

    @Override
    public void writeToParcel(Parcel dest, int flags) {
        dest.writeString(orderId);
        dest.writeString(pickupAddress);
        dest.writeString(contact);
    }
}

答案 2 :(得分：14)

我在离子2项目上测试了这些步骤，它完美无缺：

  1. 全球安装打字：
    2. npm install typings --global
    1. 通过typings安装google.maps 
      2. typings install dt~google.maps --global --save
      1. 打开tsconfig.json并将“typings / * .d.ts”添加到“include”数组中，如下所示（tsconfig.json）。
        2. {
  "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
  }
}

答案 3 :(得分：11)

typings install google.maps --global

您需要使用--global（以前为--ambient）标记来搜索DefinitlyTyped

答案 4 :(得分：10)

截至目前，正确的安装方式是：

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

答案 5 :(得分：8)

截至2年级

npm install --save @types/googlemaps

将类型根添加到您的tsconfig 

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

答案 6 :(得分：4)

斯蒂芬·保罗（Stephen Paul）清楚地解释了一切，但有一些重要的事情要提。 tsconfig可以互相扩展。而扩展一则可以覆盖父一。就我而言，我在应用程序目录下有另一个tsconfig.app.json，其中

types: []

数组。正如Stephen所解释的，此空数组将覆盖typeRoots。因此，只需删除所有相关tsconfig文件中的所有类型数组，并确保

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

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

答案 7 :(得分：4)

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

安装 

npm install --save @types/googlemaps

将脚本添加到index.html 

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

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

在此处添加下一行：

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

打开tsconfig.json并将“类型/*.d.ts”添加到“包含”数组中。 

  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx",
    "types/**/*.d.ts"
  ],

答案 8 :(得分：2)

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

只需创建一个google-maps.d.ts文件，

import '@types/googlemaps';

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

并将其添加到您的 root 文件夹中名为types的目录中。 然后指向您的tsconfig.json文件中的此文件夹。

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

答案 9 :(得分：2)

对于Angular9 +的用户，我强烈建议使用其官方组件

第1步：安装：

df.groupby('A').agg({'B':'sum', 'C':'mean'}).round(2)

第2步：注册

npm install --save-dev @angular/google-maps

第3步：实施

@NgModule({
  imports: [
    GoogleMapsModule
  ]
})
export class AppModule { }

<google-map [center]="center" [options]="options"></google-map>

请参阅https://medium.com/angular-in-depth/google-maps-is-now-an-angular-component-821ec61d2a0，以获取更详细的指南

答案 10 :(得分：1)

最简单的方法是使用 triple-slash directive 。幸运的是，还有一种可用的语法可以利用标准软件包的解析度：

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

答案 11 :(得分：0)

如果在预览时遇到错误消息Cannot find namespace ‘google’，则需要做两件事。

  1. 安装Google Map插件

    npm install @google/maps

  2. 只需将Google地图导入到app.component.ts文件

    import { google } from '@google/maps';

来源：https://medium.com/javascript-in-plain-english/integrate-google-maps-to-your-angular-application-step-by-step-guide-3604aadb76d1

答案 12 :(得分：0)

好吧，我已经在我的 angular 11 项目中尝试了上述所有方法但没有成功，最后 official typing from google 解决了我的问题：

npm install --save @types/google.maps

答案 13 :(得分：-1)

新的 @ types / google__maps 非常适合我们。原始的（ @ types / googlemaps ）棘手，并且具有许多浏览器依赖项（例如HTMLElement），如果您在nodejs环境中使用TS，则会无法编译TS。

  

npm install @ types / google__maps -D

因此，在 DefinitelyTyped 中有 googlemaps ， google-maps 和 google__maps 。区别说明如下： https://github.com/DefinitelyTyped/DefinitelyTyped/pull/29625#issuecomment-429207839

相关问题
最新问题