วิธีติดตั้งประเภทของ Typescript สำหรับ Google Maps

มันสามารถทำได้อย่างไร - ฉันได้ลองชุดค่าผสมของ

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

และลงเอยด้วยความแตกต่างของข้อผิดพลาดนี้

typings ERR! ข้อความ ไม่สามารถหาค่า "googlemaps" สำหรับ "npm" ในทะเบียนได้

ตามคำแนะนำของเอมี่ ฉันได้ดาวน์โหลดไปยังไดเรกทอรีที่เกี่ยวข้องและเพิ่มแล้ว

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

ไปที่ main.d.ts ของฉัน (ไฟล์ซึ่งชัดเจนว่ากำลังถูกอ่านเพราะฉันไม่ได้รับข้อผิดพลาดอื่น ๆ)

และฉันไม่สามารถหาข้อมูลอะไรบนอินเทอร์เน็ตเพื่อตอบคำถามนั้นได้

เป้าหมายสุดท้ายของฉันคือการกำจัดข้อผิดพลาดประเภทนี้

ข้อผิดพลาด TS2503: ไม่สามารถหาชื่อเนมสเปซ 'google' ได้.

คำตอบ #1

ดังนั้นสิ่งที่ทำให้สิ่งนี้พิเศษคือสคริปต์แผนที่จำเป็นต้องดาวน์โหลดแยกจากแอปของคุณ มันไม่ใช่ npm install แบบทั่วไปที่คุณจะได้ .js และ .ts มาบรรจุอย่างเรียบร้อยเพื่อใช้งาน

สรุปสั้น: การพิมพ์สามารถติดตั้งผ่าน npm ได้ แต่สคริปต์ .js ต้องดาวน์โหลดผ่านแท็ก <script> (สำหรับ SPA แท็กนี้สามารถถูกเพิ่มเข้าไปในหน้าเว็บของคุณแบบทันทีเพื่อปรับปรุงเวลาโหลดเริ่มต้นของแอปของคุณ ซึ่งนี่คือสิ่งที่ฉันทำ)

เส้นทางที่ผมแนะนำมีดังนี้:

ติดตั้ง

npm install --save-dev @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' ไม่ใช่โมดูล

เพิ่มไฟล์ที่ไดเรกทอรีรากของโครงการของคุณชื่อ index.d.ts และแทรกสิ่งต่อไปนี้:

declare module 'googlemaps';

อัปเดต 01.06.2018 (ข้อค้นพบของ @DicBrus):

เพื่อที่จะนำเข้า namespace ของ Google และกำจัดข้อผิดพลาดที่น่ารำคาญ "ไม่พบ namespace 'google'" คุณควรตรวจสอบให้แน่ใจว่าคุณได้ทำการนำคำนิยาม namespace เข้าสู่ @types/googlemaps แล้ว

มีสองวิธีในการทำสิ่งนี้:

1. คำสั่งสามขีด

   /// /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 โดยอัตโนมัติ

การลบบรรทัดนี้ช่วยแก้ปัญหาสำหรับฉันได้เช่นเดียวกับการเพิ่มคำสั่ง triple-slash แต่ฉันเลือกวิธีที่สอง

สำหรับการนำเข้าแบบ "ว่าง" ผมไม่พบคำอธิบายว่ามันทำงานอย่างไรและทำไม ผมคิดว่ามัน ไม่ ได้นำเข้าโมดูลหรือคลาสใด ๆ แต่จะนำเข้าชุดของชื่อ (namespaces) วิธีแก้ปัญหานี้ไม่เหมาะกับผม เพราะ IDE จะทำเครื่องหมายการนำเข้านี้ว่า "ไม่ได้ใช้" และสามารถลบออกได้ง่าย เช่น คำสั่ง Ctrl+Alt+O ของ WebStorm - ทำให้โค้ดสวยงามและลบการนำเข้าที่ไม่จำเป็นทั้งหมด

คำตอบ #2

ในการปฏิบัติ กรณีการใช้งานของฉันคือ Angular CLI และทั้งหมดที่ฉันต้องการคือ

npm install --save @types/google-maps

คำตอบ #3

ฉันทดสอบขั้นตอนเหล่านี้ในโปรเจกต์ Ionic 2 ของฉันและมันทำงานได้อย่างสมบูรณ์แบบ:

1. ติดตั้ง typings ทั่วโลก :

npm install typings --global

2. ติดตั้ง google.maps ผ่าน typings

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

คำตอบ #4

วิธีที่ง่ายที่สุดคือการใช้ triple-slash directive โชคดีที่มีไวยากรณ์ทางเลือกที่สามารถใช้ประโยชน์จากการแก้ไขแพ็กเกจมาตรฐานได้:

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

คำตอบ #5

ฉันลำบากในการกำหนดวัตถุ google บน window ในที่สุดก็พบวิธีที่ดี โดยการขยายอินเทอร์เฟซ Window.

เพียงสร้างไฟล์ google-maps.d.ts พร้อมกับสิ่งนี้:

import '@types/googlemaps';

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

และเพิ่มมันเข้าไปยังโฟลเดอร์ที่เรียกว่า types ในโฟลเดอร์ root ของคุณ จากนั้นชี้ไปยังโฟลเดอร์นี้ในไฟล์ tsconfig.json ของคุณ

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

คำตอบ #6

typings install google.maps --global

คุณต้องการแฟล็ก --global (เคยใช้ --ambient) เพื่อค้นหา DefinitlyTyped

คำตอบ #7

ณ ตอนนี้ วิธีการติดตั้งที่ถูกต้องคือ:

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

คำตอบ #8

ตั้งแต่ TypeScript 2

npm install --save @types/googlemaps

เพิ่ม typeroots ลงใน tsconfig ของคุณ

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