"Uncaught SyntaxError: Unexpected token ':'"が出た場合

久しぶりにTSでコードを書いてみて嬉々として実行しようとしたらエラーが出たのでその備忘録です。

状況

googleマップを表示させるために以下のコードを書き、実行しようとした。

index

let map: google.maps.Map;

async function initMap(): Promise<void> {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  map = new Map(document.getElementById("map") as HTMLElement, {
    center: { lat: 35.6523016, lng: 139.7312395 },
    zoom: 8,
  });
}

initMap();

結論

tsファイルは直接実行することができないため、jsファイルにコンパイルする必要があったため、以下を実行した。

tsc index.ts

また横着してindex.htmlファイルをダブルクリックで実行しようとしていたため、Live Server vscodeをインストールし、そこから実行するようにした。

学び

多分同じ状況で"~Unexpected token ':'"以外の似たようなエラーが出そうな気がするので、「そこ関係なくない？」というエラーが出たら、初歩的なところを確認しようと思う。