TypeScript เป็นส่วนขยายของ JavaScript ที่มีการพิมพ์ ซึ่งคอมไพล์เป็น JavaScript ธรรมดา ข้อมูลโค้ดด้านล่างแสดงการใช้งาน Google Maps อย่างง่ายโดยใช้ 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
});
}
เริ่มต้นใช้งาน
โปรเจ็กต์ DefinitelyTyped เป็นโปรเจ็กต์โอเพนซอร์สที่ดูแลไฟล์ประกาศประเภท สำหรับแพ็กเกจจำนวนมาก รวมถึง Google Maps คุณติดตั้งไฟล์ประกาศ JavaScript ของ Google Maps (ดูไฟล์ต้นฉบับใน GitHub) ได้โดยใช้ NPM จากแพ็กเกจ @types/google.maps
npm i -D @types/google.maps
ฟีเจอร์เวอร์ชันอัลฟ่าและเบต้า
โดยปกติแล้ว types จะไม่มีพร็อพเพอร์ตี้ ฟังก์ชัน หรือคลาสที่พบในรุ่นอัลฟ่าหรือ เบต้า ในหลายๆ กรณี คุณสามารถแคสต์ออบเจ็กต์ไปยังประเภทที่ถูกต้องได้
ข้อผิดพลาดต่อไปนี้เกิดจากmapIdพร็อพเพอร์ตี้เวอร์ชันเบต้าสำหรับ 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'.
คุณแก้ไขข้อผิดพลาดข้างต้นได้ด้วยการแคสต์ด้านล่าง
{ center: {lat: 30, lng: -110}, zoom: 8, mapId: '1234' } as google.maps.MapOptions
แพ็กเกจ @types ที่ขัดแย้งกัน
ไลบรารีบางรายการอาจใช้แพ็กเกจอื่นนอกเหนือจาก @types/google.maps ซึ่งอาจทำให้เกิดความขัดแย้ง ใช้ตัวเลือกคอมไพเลอร์ skipLibCheck เพื่อหลีกเลี่ยงปัญหาเกี่ยวกับประเภทที่ไม่สอดคล้องกัน
{
"compilerOptions": {
"skipLibCheck": true
}
}
การระบุ typeRoots
เฟรมเวิร์กบางอย่าง เช่น Angular อาจต้องระบุตัวเลือกคอมไพเลอร์ typeRoots เพื่อรวมประเภทที่ติดตั้งจาก @types/google.maps และแพ็กเกจ "@types" อื่นๆ ทั้งหมด
{
...
"compilerOptions": {
...
"typeRoots": [
"node_modules/@types",
],
...
}
}