TypeScript と Google マップ

TypeScript は、プレーン JavaScript にコンパイルされる JavaScript の型付きスーパーセットです。次のスニペットは、Google マップでの 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
  });
}

はじめに

DefinitelyTyped プロジェクトは、Google マップを含む多数のパッケージの型宣言ファイルを保持するオープンソースプロジェクトです。Google マップの JavaScript 宣言ファイル（GitHub のソースファイルを参照）は、@types/google.maps パッケージから NPM を使用してインストールできます。

npm i -D @types/google.maps

アルファ版とベータ版の機能

通常、型には、アルファ版またはベータ版のリリースに含まれるプロパティ、関数、クラスはありません。多くの場合は、オブジェクトを適切な型にキャストできます。

MapOptions の mapId のベータ版プロパティによって、次のエラーが生じます。

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'.

上記のエラーは、以下のキャストによって修正できます。

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

@types パッケージの競合

一部のライブラリでは、@types/google.maps 以外のパッケージを使用していることがあり、それによって競合が生じる場合があります。型に一貫性がない問題を回避するには、skipLibCheck コンパイラオプションを使用します。

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

typeRoots の指定

Angular など一部のフレームワークでは、@types/google.maps からインストールされたタイプとその他すべての「@types」パッケージを組み込むために、typeRoots コンパイラオプションの指定が必要となることがあります。

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