การประกาศแบบแอมเบียนต์ (.d.ts) และการกำหนดชนิดข้อมูลจากบุคคลที่สาม
เขียนการประกาศแบบแอมเบียนต์ในไฟล์ .d.ts เพื่ออธิบายตัวแปรโกลบอลและโมดูล พร้อมติดตั้งและใช้การกำหนดชนิดข้อมูลจากบุคคลที่สามอย่างปลอดภัย
การประกาศแบบแอมเบียนต์ (.d.ts) และการกำหนดชนิดข้อมูลจากบุคคลที่สาม เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 3 บทเรียน
บทนำ
เป้าหมาย: อธิบาย JavaScript ภายนอกด้วย การประกาศแวดล้อม ในไฟล์ .d.ts และใช้ ข้อมูลชนิดจากไลบรารีภายนอก สำหรับไลบรารีที่ไม่มีชนิดข้อมูล
การประกาศส่วนกลาง
globals.d.ts: ประกาศ ตัวแปรส่วนกลาง และขยายอินเทอร์เฟซแบบแวดล้อม เช่น Window โดยไม่สร้างไฟล์ JS
// file: globals.d.ts
// Declare global variables and interfaces
declare const VERSION: string;
declare interface Window {
appReady?: boolean;
}พื้นฐานแลมบ์ดาที่มีตัวรับ
- ตัวรับ = อินสแตนซ์ของตัวสร้างที่ใช้ภายในแลมบ์ดา
- การเรียกใช้สะอาดขึ้น: item("Tea") แทน builder.item
- ตั้งชื่อให้สั้นและทำให้การกระทำชัดเจน
การประกาศโมดูล
การประกาศโมดูล ใช้อธิบายแพ็กเกจที่ไม่มีชนิดข้อมูลติดมาด้วย จากนั้น import { coolify } จะตรวจสอบชนิดได้อย่างถูกต้อง
// file: cool-lib.d.ts
// Provide types for an untyped JS module
declare module "cool-lib" {
export function coolify(s: string): string;
export const version: string;
}การเพิ่มส่วนขยายโมดูล
การเพิ่มส่วนขยายโมดูล ใช้ขยายข้อมูลชนิดที่ติดตั้งไว้แล้ว เช่น เพิ่มพร็อพเพอร์ตีแบบกำหนดเองให้กับอินเทอร์เฟซที่มีอยู่
// file: react-augment.d.ts
// Extend an existing module (augmentation)
declare module "react" {
interface HTMLAttributes<T> {
dataTestId?: string;
}
}ข้อมูลชนิดจากไลบรารีภายนอก
ควรใช้แพ็กเกจ @types/ จาก DefinitelyTyped เมื่อไลบรารีไม่มีชนิดข้อมูลติดมาด้วย แพ็กเกจเหล่านี้จะเพิ่มเฉพาะไฟล์ .d.ts ในกระบวนการสร้างโปรเจกต์
// install: npm i -D @types/lodash
// usage:
import _ from "lodash";
const r = _.chunk([1,2,3,4], 2);เคล็ดลับและการค้นหา
เคล็ดลับ:
- วางไฟล์ .d.ts ไว้ใต้ src/ หรือเพิ่มไฟล์เหล่านั้นผ่าน tsconfig.json (
include/typeRoots/types) - ใช้ การเพิ่มส่วนขยายโมดูล เพื่อขยายข้อมูลชนิด และหลีกเลี่ยงการแก้ไข node_modules
- หลีกเลี่ยงการใช้
anyอย่างกว้างเกินไป ควรระบุโครงสร้างข้อมูลที่ถูกต้องและจำเป็นที่สุด
ตรวจสอบการประกาศแวดล้อม
ตรวจสอบอย่างรวดเร็ว: การประกาศแวดล้อมใช้สำหรับอะไร
สรุป
สรุป: ใช้ไฟล์ .d.ts สำหรับตัวแปรส่วนกลางและโมดูล ควรเลือกใช้ @types สำหรับข้อมูลชนิดจากชุมชน และขยายอย่างปลอดภัยด้วย การเพิ่มส่วนขยายโมดูล
สรุปทบทวน
สรุปทบทวน: ใช้ ตัวรับที่ระบุชนิดข้อมูล แยกกันในแต่ละบล็อก เพิ่ม @DslMarker เพื่อความปลอดภัยของขอบเขต และส่งคืนโมเดลที่ ไม่เปลี่ยนแปลง เพื่อให้ใช้งานได้อย่างเป็นระเบียบ
คำถามที่พบบ่อย
บทเรียน “การประกาศแบบแอมเบียนต์ (.d.ts) และการกำหนดชนิดข้อมูลจากบุคคลที่สาม” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การประกาศแบบแอมเบียนต์ (.d.ts) และการกำหนดชนิดข้อมูลจากบุคคลที่สาม” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การประกาศแบบแอมเบียนต์ (.d.ts) และการกำหนดชนิดข้อมูลจากบุคคลที่สาม”
เขียนการประกาศแบบแอมเบียนต์ในไฟล์ .d.ts เพื่ออธิบายตัวแปรโกลบอลและโมดูล พร้อมติดตั้งและใช้การกำหนดชนิดข้อมูลจากบุคคลที่สามอย่างปลอดภัย คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน
บทเรียน “การประกาศแบบแอมเบียนต์ (.d.ts) และการกำหนดชนิดข้อมูลจากบุคคลที่สาม” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม
ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ES Modules (แบบระบุชื่อเทียบกับค่าเริ่มต้น) และการส่งออกซ้ำ
- การประกาศแบบแอมเบียนต์ (.d.ts) และการกำหนดชนิดข้อมูลจากบุคคลที่สาม
- การแมปเส้นทางและการแก้ไขโมดูล