TypeScript Academy · บทเรียน

การจัดการไลบรารีภายนอกที่ไม่มีชนิด

ใช้แพ็กเกจ @types และเขียนคำประกาศด้วยตนเอง

การจัดการไลบรารีภายนอกที่ไม่มีชนิด เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

ปัญหา: ชนิดข้อมูลหายไป

แพ็กเกจ npm บางรายการไม่ได้รวมการประกาศ TypeScript มาให้ และไม่มีแพ็กเกจ @types/ TypeScript จะถือว่าแพ็กเกจเหล่านั้นเป็น any โดยค่าเริ่มต้น ทำให้สูญเสียความปลอดภัยของชนิดข้อมูลที่ขอบเขตการเชื่อมต่อ

import legacyLib from "untyped-lib"; // legacyLib: any

แพ็กเกจ @types

โครงการ DefinitelyTyped จัดเตรียมการประกาศชนิดข้อมูลที่ชุมชนดูแลสำหรับไลบรารีหลายพันรายการ ค้นหา @types/library-name ใน npm

npm install --save-dev @types/lodash
npm install --save-dev @types/express
# Now lodash and express have full TypeScript types

เขียนไฟล์การประกาศ (.d.ts)

หากไม่มีแพ็กเกจ @types ให้เขียนไฟล์การประกาศขั้นต่ำในโครงการเพื่อประกาศโมดูลและชนิดข้อมูลของโมดูลนั้น

// src/types/untyped-lib.d.ts
declare module "untyped-lib" {
  export function doSomething(x: string): number;
  export const version: string;
}

การเพิ่มข้อมูลให้โมดูล

ขยายชนิดข้อมูลของบุคคลที่สามที่มีอยู่ โดยเพิ่มการประกาศของคุณลงในโมดูลเดิมโดยไม่ต้องแยกโครงการออกมา

// Extend Express Request with a custom property
declare namespace Express {
  interface Request {
    user?: AuthUser;
  }
}

การประกาศโมดูลแบบไวลด์การ์ด

สำหรับการนำเข้าที่ไม่มีการระบุชนิดข้อมูลทั้งหมวด เช่น ไฟล์ทรัพยากร ให้ใช้การประกาศโมดูลแบบไวลด์การ์ด

// src/types/assets.d.ts
declare module "*.svg" {
  const content: string;
  export default content;
}
declare module "*.json" {
  const value: Record<string, unknown>;
  export default value;
}

noImplicitAny และไลบรารีที่ไม่มีชนิดข้อมูล

เมื่อใช้ noImplicitAny: true การนำเข้าโมดูลที่ไม่มีการระบุชนิดข้อมูลจะทำให้เกิดข้อผิดพลาดในการคอมไพล์ ใช้ไฟล์การประกาศ หรือปิดใช้ noImplicitAny รายไฟล์ด้วย // @ts-ignore

// Quick fix for a single untyped import:
// @ts-ignore
import untypedLib from "untyped-lib";

ร่วมพัฒนา DefinitelyTyped

หากคุณเขียนชนิดข้อมูลคุณภาพสูงสำหรับไลบรารีที่ไม่มีการระบุชนิดข้อมูล ให้ส่งชนิดข้อมูลเหล่านั้นไปยัง DefinitelyTyped เพื่อช่วยเหลือชุมชน

# Fork DefinitelyTyped and add:
# types/your-library/index.d.ts
# types/your-library/package.json
# Submit a PR at github.com/DefinitelyTyped/DefinitelyTyped

ใช้ any เป็นทางเลือกสุดท้าย

เมื่อไม่สามารถหาชนิดข้อมูลได้อย่างรวดเร็ว ให้ใช้ any อย่างชัดเจนพร้อมความคิดเห็นที่ติดตามหนี้ทางเทคนิค วิธีนี้ดีกว่า any โดยปริยาย เพราะเป็นการใช้โดยตั้งใจและมองเห็นได้

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const lib: any = require("untyped-lib"); // TODO: add types

skipLibCheck สำหรับข้อผิดพลาดในการประกาศ

หากไฟล์ .d.ts ของบุคคลที่สามมีข้อผิดพลาดภายใน skipLibCheck: true จะปิดเสียงข้อผิดพลาดเหล่านั้นโดยไม่กระทบการตรวจสอบชนิดข้อมูลของคุณเอง

{
  "compilerOptions": {
    "skipLibCheck": true
  }
}

ตัวห่อหุ้มชนิดข้อมูลสำหรับไลบรารีที่ไม่ปลอดภัย

เขียนโมดูลตัวห่อหุ้มที่มีชนิดข้อมูลรอบไลบรารีที่ไม่มีการระบุชนิดข้อมูล เพื่อจำกัด any ไว้ภายในและเปิดเผย API ที่มีชนิดข้อมูลปลอดภัยให้โค้ดส่วนที่เหลือของคุณ

// src/lib/safe-legacy.ts
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const raw: any = require("untyped-lib");
export function doSomething(x: string): number { return raw.doSomething(x); }

ทบทวน: ไลบรารีที่ไม่มีชนิดข้อมูล

จัดการไลบรารีที่ไม่มีการระบุชนิดข้อมูล: ตรวจสอบแพ็กเกจ @types/ ก่อน เขียนไฟล์การประกาศขั้นต่ำ ใช้การเพิ่มข้อมูลให้โมดูล สร้างตัวห่อหุ้มที่มีชนิดข้อมูล และใช้ skipLibCheck สำหรับข้อผิดพลาดในการประกาศของส่วนที่ต้องพึ่งพา

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ควรดูที่ใดเป็นอันดับแรกเพื่อค้นหาการประกาศชนิดข้อมูลสำหรับแพ็กเกจ npm ที่ไม่มีการระบุชนิดข้อมูล?

สิ่งที่คุณได้เรียนรู้

ไลบรารีที่ไม่มีชนิดข้อมูล: ตรวจสอบแพ็กเกจ @types/ เขียนไฟล์การประกาศ เพิ่มข้อมูลให้ชนิดข้อมูลเดิม ใช้การประกาศโมดูลแบบไวลด์การ์ด ห่อหุ้มไลบรารีที่ไม่ปลอดภัยด้วยส่วนหน้าที่มีชนิดข้อมูล และใช้ skipLibCheck สำหรับข้อผิดพลาดของส่วนที่ต้องพึ่งพา

คำถามที่พบบ่อย

บทเรียน “การจัดการไลบรารีภายนอกที่ไม่มีชนิด” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การจัดการไลบรารีภายนอกที่ไม่มีชนิด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การจัดการไลบรารีภายนอกที่ไม่มีชนิด”

ใช้แพ็กเกจ @types และเขียนคำประกาศด้วยตนเอง คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “การจัดการไลบรารีภายนอกที่ไม่มีชนิด” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม

ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ TypeScript Academy