TypeScript là tập mẹ của JavaScript đã nhập 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 của Google Maps bằng cách sử dụ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
Chiến lược phát hành đĩa đơn DedefdefdeTyped project (Dự án chắc chắn được định kiểu) là dự án nguồn mở duy trì kiểu tệp khai báo cho nhiều gói, bao gồm cả Google Maps. Khai báo JavaScript cho Google Maps tệp (xem tệp nguồn trên GitHub) có thể được cài đặt bằng cách sử dụng trái với trình duyệt Gói @types/google.maps.
npm i -D @types/google.maps
Tính năng alpha và beta
Chiến lược phát hành đĩa đơn loại thường không có thuộc tính, hàm hoặc lớp trong alpha hoặc bản phát hành beta. Trong nhiều trường hợp như vậy, bạn có thể truyền đối tượng tới giá trị chính xác loại.
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 @types/google.maps, vì việc này có thể gây ra xung đột. Sử dụng skipLibCheck trình biên dịch để tránh các vấn đề với 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 typeRoots tuỳ chọn trình biên dịch để bao gồm các loại được cài đặt từ @types/google.maps và tất cả các "@types" khác .
{
...
"compilerOptions": {
...
"typeRoots": [
"node_modules/@types",
],
...
}
}