TypeScript và Google Maps

TypeScript là tập mẹ của JavaScript đã nhập và sẽ 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 DedefinedlyTyped là một dự án nguồn mở duy trì tệp khai báo loại 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 TLD từ gói @types/google.maps.

npm i -D @types/google.maps

Tính năng alpha và beta

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

Thuộc tính beta mapId của MapOptions gây ra lỗi sau đây.

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 cách truyền nội dung ở bên dưới.

{ 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ể dùng một gói khác với gói @types/google.maps và việc này có thể gây ra xung đột. Sử dụng tuỳ chọn trình biên dịch skipLibCheck để tránh các vấn đề xảy ra 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 qua @types/google.maps và tất cả các gói "@types" khác.

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