TypeScript và Google Maps

TypeScript là một siêu tập hợp được nhập của JavaScript, 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 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ì tệp khai báo kiểu 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 NPM từ gói @types/google.maps.

npm i -D @types/google.maps

Các tính năng trong giai đoạn thử nghiệm alpha và beta

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

Lỗi sau đây là do thuộc tính mapId ở giai đoạn thử nghiệm cho MapOptions gây ra.

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ể khắc phục lỗi trên bằng cách truyền như dưới đây.

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

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

Một số thư viện có thể sử dụng một gói khác ngoài @types/google.maps, điều này có thể gây ra xung đột. Sử dụng lựa chọn trình biên dịch skipLibCheck để tránh các vấn đề về kiểu 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 lựa chọn trình biên dịch typeRoots để đưa 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",
        ],
        ...
    }
}