TypeScript và Google Maps

Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

TypeScript là một tập hợp JavaScript cao cấp được nhập nội dung để biên dịch thành JavaScript thuần tuý. Đoạn mã dưới đây minh hoạ cách sử dụng đơn giản Google Maps bằng cách sử dụng TypeScript.

let map: google.maps.Map;
const center: google.maps.LatLngLiteral = {lat: 30, lng: -110};

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    center,
    zoom: 8
  });
}

Bắt đầu

Dự án DefinitelyTyped là một dự án nguồn mở duy trì các tệp khai báo loại dành cho nhiều gói, bao gồm cả Google Maps. Bạn có thể cài đặt các tệp khai báo JavaScript của Google Maps (xem tệp nguồn trên GitHub) bằng cách sử dụng NPM từ gói @types/google.maps.

npm i -D @types/google.maps

Tính năng alpha và beta

Loại thường không có thuộc tính, hàm hoặc lớp được tìm thấy trong bản phát hành alpha hoặc beta. Trong nhiều trường hợp, đối tượng có thể được truyền đúng loại.

Lỗi sau đây là do thuộc tính beta của mapId gây ra cho MapOptions.

error TS2345: Argument of type '{ center: google.maps.LatLng; zoom: number;
mapId: string; }' is not assignable to parameter of type 'MapOptions'. Object
literal may only specify known properties, and 'mapId' does not exist in type
'MapOptions'.

Bạn có thể sửa lỗi ở trên bằng dàn diễn viên bên dưới.

{ center: {lat: 30, lng: -110}, zoom: 8, mapId: '1234' } as google.maps.MapOptions

Các gói @type xung đột

Một số thư viện có thể sử dụng một gói khác với @types/google.maps. Các gói này có thể gây ra xung đột. Hãy sử dụng tuỳ chọn trình biên dịch ignoreLibCheck để tránh gặp vấn đề với các loại không nhất quán.

{
  "compilerOptions": {
    "skipLibCheck": true
  }
}

Chỉ định typeRoots

Một số khung như Angular có thể yêu cầu chỉ định tuỳ chọn trình biên dịch typeRoots để bao gồm các loại được cài đặt từ @types/google.maps và tất cả các gói "@types" khác.

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