TypeScript là tập hợp con của JavaScript được 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 Google Maps đơn giản 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
Dự án DefinitelyTyped là một dự án nguồn mở duy trì các 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 NPM qua gói @types/google.maps.
npm i -D @types/google.maps
Tính năng alpha và beta
Loại thường không có thuộc tính, hàm hoặc lớp trong các bản phát hành alpha hoặc beta. Trong nhiều trường hợp, đối tượng có thể được truyền đúng loại.
Lỗi sau đây do thuộc tính thử nghiệm mapId của MapOptions gây ra.
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ể khắc phục 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ể sử dụng gói không phải là @types/google.maps, việc này có thể gây ra xung đột. Sử dụng tuỳ chọn trình biên dịch ignoreLibCheck để tránh các vấn đề liên quan đến 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 từ @types/google.maps và tất cả các gói "@types" khác.
{
...
"compilerOptions": {
...
"typeRoots": [
"node_modules/@types",
],
...
}
}