TypeScript to typowy ciąg nadrzędny JavaScriptu, który kompiluje się do zwykłego JavaScriptu. Fragment kodu poniżej przedstawia proste korzystanie z Map Google za pomocą TypeScriptu.
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
});
}
Pierwsze kroki
Projekt DefinitelyTyped to projekt typu open source, w którym są przechowywane pliki deklaracji typu dotyczące wielu pakietów, w tym również Map Google. Pliki deklaracji JavaScript Map Google (patrz pliki źródłowe na GitHubie) można zainstalować za pomocą NPM z pakietu @types/google.maps.
npm i -D @types/google.maps
Funkcje w wersjach alfa i beta
Typy zwykle nie mają właściwości, funkcji ani klas, które występują w wersjach alfa i beta. W wielu z tych przypadków można rzutować obiekt na prawidłowy typ.
Ten błąd jest spowodowany przez właściwość mapId w wersji beta dla 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'.
Powyższy błąd można naprawić, korzystając z podanej obsady.
{ center: {lat: 30, lng: -110}, zoom: 8, mapId: '1234' } as google.maps.MapOptions
Konflikt pakietów typu @types
Niektóre biblioteki mogą używać pakietu innego niż @types/google.maps, co może powodować konflikty. Aby uniknąć problemów z niespójnymi typami, użyj opcji kompilatora skipLibCheck.
{
"compilerOptions": {
"skipLibCheck": true
}
}
Określanie typu typeRoots
Niektóre platformy, takie jak Angular, mogą wymagać określenia opcji kompilatora typeRoots, który uwzględnia typy zainstalowane z @types/google.maps i wszystkie inne pakiety „@types”.
{
...
"compilerOptions": {
...
"typeRoots": [
"node_modules/@types",
],
...
}
}