TypeScript là một tập mẹ 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 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 DeVerifyTyped là một dự án nguồn mở duy trì 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 ALIAS trong gói @types/google.maps.
npm i -D @types/google.maps
Các tính năng trong giai đoạn Alpha và Beta
Các loại thường không có thuộc tính, hàm hoặc lớp có trong bản phát hành alpha hoặc beta. Trong nhiều trường hợp như vậy, đối tượng có thể được chuyển thành đúng loại.
Lỗi sau đây là do thuộc tính thử nghiệm mapId cho 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'.
Có thể sửa lỗi ở trên bằng nội dung truyền dưới đây.
{ center: {lat: 30, lng: -110}, zoom: 8, mapId: '1234' } as google.maps.MapOptions
Các gói @type xung đột
Một số thư viện có thể sử dụng một gói không phải là @types/google.maps, điều này có thể gây ra xung đột. Sử dụng tuỳ chọn trình biên dịch skipLibCheck để tránh các vấn đề về các kiểu 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 kiểu được cài đặt từ @types/google.maps và tất cả các gói "@types" khác.
{
...
"compilerOptions": {
...
"typeRoots": [
"node_modules/@types",
],
...
}
}