typescript - node_modules - Cómo instalar los tipos de letraescriptcript para google maps

node_modules/@types/googlemaps/index.d.ts'' is not a module.

Question

¿Cómo se puede hacer? He probado combinaciones de

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

y terminan con variaciones en este error

tipings ERR! mensaje No se pueden encontrar "googlemaps" para "npm" en el registro.

Según la sugerencia de Amy, también lo descargué en el directorio correspondiente y agregué

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

a mi main.d.ts (un archivo que claramente se está leyendo ya que no obtengo otros errores).

Y no puedo encontrar nada en la web para responder la pregunta

Mi objetivo final es deshacerme de este tipo de error

error TS2503: No se puede encontrar el espacio de nombres ''google''.

Answer 1

A partir de ahora, la forma correcta de instalar es:

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

Answer 2

A partir del mecanografiado 2

npm install --save @types/googlemaps

Agregue typeroots a su tsconfig

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

Answer 3

En la práctica, mi caso de uso es la CLI angular, y allí todo lo que necesito es

npm install --save @types/google-maps

Answer 4

Entonces, lo que lo hace excepcional es que la secuencia de comandos de mapas debe descargarse por separado del paquete de la aplicación. No es la instalación típica de npm install donde obtienes tus .js y .ts bien empaquetados para el consumo.

TLDR : los tipings pueden instalarse a través de npm pero el script .js debe descargarse a través de una etiqueta <script> (para SPAs, esta etiqueta se puede agregar a su página web sobre la marcha para mejorar el tiempo de carga inicial de su aplicación, que es lo que hago)

Mi ruta recomendada es la siguiente:

Instalar

npm install --save @types/googlemaps

Importar

import {} from ''googlemaps'';

Cargar y usar (esta función se asegura de que la secuencia de comandos de los mapas solo se agregue a la página una vez, para que se pueda llamar una y otra vez)

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

Recuerde, la secuencia de comandos de mapas debe agregarse a la página y la secuencia de comandos debe descargarse antes de que suceda cualquier otra cosa. Si está utilizando Angular, por ejemplo, envuelvo la lógica addMapsScript () en un observable y pongo en mi resolutor de ruta de componentes de mapa.

Use los tipos (las definiciones de tipo incluyen, entre otras):

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

Deshágase de la advertencia: @types/googlemaps/index.d.ts'' is not a module.

Agregue un archivo en el directorio raíz de sus proyectos llamado index.d.ts e inserte lo siguiente:

declare module ''googlemaps'';

Actualización 01.06.2018 (resultados de @DicBrus):

Para importar espacios de nombres de Google y deshacerse del molesto error "No se puede encontrar el espacio de nombres ''google''", debe asegurarse de haber importado las definiciones de espacios de nombres en @types/googlemaps

Hay dos maneras de hacerlo:
1. directiva triple barra

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

Funcionó bien, pero no tan elegante.

La documentación se puede encontrar aquí: https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html

2. Asegúrese de que se importe en tsconfig.json y, dado que se importa, no necesita importar algo adicional

El manual detallado está aquí: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

debe verificar dos subsecciones en compilerOptions : typeRoots y types

De forma predeterminada, todas las definiciones de tipos en node_modules / @ types se importan a menos que haya especificado exactamente lo que necesita.

En mi caso particular tenía la siguiente sección:

"types": []

Inhabilita la inclusión automática de paquetes @types.

La eliminación de esta línea resolvió el problema para mí, y también ayudó la adición de la directiva de triple barra. Pero elegí la segunda solución.

En cuanto a la importación "vacía", no encontré ninguna explicación de cómo y por qué funciona. Supongo que NO importa ningún módulo o clase, pero sí importa espacios de nombres. Esta solución no es adecuada para mí, ya que IDE marca esta importación como "no utilizada" y puede eliminarse fácilmente. Por ejemplo, el comando webstorm Ctrl + Alt + O: embellece el código y elimina todas las importaciones innecesarias.

Answer 5

La forma más fácil es usar una https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html . Afortunadamente, hay una sintaxis alternativa disponible que aprovecha la resolución estándar del paquete:

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

Answer 6

Luché por definir el objeto de google en la ventana, finalmente encontré una buena manera, extendiendo la interfaz de Window .

Simplemente cree un archivo google-maps.d.ts con esto:

import ''@types/googlemaps'';

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

Y agréguelo a un directorio llamado types en su carpeta raíz . Luego apunte a esta carpeta en su archivo tsconfig.json .

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

Answer 7

Mi solución (funciona para Vue2.x):

Instalar

npm install --save @types/googlemaps

Agregar script a index.html

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

Crear en la carpeta raíz tipos / index.d.ts

Ponga aquí las siguientes líneas:

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

Abra tsconfig.json y agregue "types / *. D.ts" a su matriz "include".

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

Answer 8

Probé estos pasos en mi proyecto iónico 2 y funciona perfectamente:

1. instalar tipings a nivel mundial:

npm install typings --global

2. instalar google.maps a través de tipings

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

3. abra tsconfig.json y agregue "typings / *. d.ts" a su matriz "include" como se muestra a continuación (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 9

Stephen Paul explica claramente todo, pero hay algo importante que mencionar. tsconfigs pueden extenderse entre sí . Y uno extendido puede sobrescribir el padre. En mi caso, tuve otro tsconfig.app.json en el directorio de aplicaciones que tiene

types: []

matrices Como Stephen ya explicó, esta matriz vacía anula typeRoots. Tan solo elimine todos los tipos de matrices en TODOS los archivos tsconfig relacionados y asegúrese de que

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

está presente. No es necesario decir que @ types @ googlemaps deben estar instalados

Answer 10

typings install google.maps --global

Necesita el --global (solía ser --ambient ) para buscar DefinitlyTyped