คำประกาศ TypeScript สำหรับไลบรารีคอมโพเนนต์
vite-plugin-dts การสร้างไฟล์ .d.ts และการกำหนดชนิด props ของคอมโพเนนต์สำหรับผู้ใช้ไลบรารี
คำประกาศ TypeScript สำหรับไลบรารีคอมโพเนนต์ เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุผลที่ต้องมีประกาศชนิดข้อมูล
ผู้ใช้ TypeScript คาดหวังไฟล์ .d.ts เพื่อให้ได้รับการเติมข้อความอัตโนมัติและการตรวจสอบชนิดข้อมูลของคอมโพเนนต์และพร็อพของคุณ ไลบรารีที่เผยแพร่ควรส่งประกาศที่สร้างขึ้นไปพร้อมกับ JS
ปลั๊กอินสร้างประกาศชนิดข้อมูลสำหรับ Vite
vite-plugin-dts จะสร้างไฟล์ .d.ts จากต้นฉบับระหว่างการสร้างด้วย Vite รวมถึงชนิดข้อมูลสำหรับคอมโพเนนต์แบบไฟล์เดียว .vue
npm install -D vite-plugin-dtsการเพิ่มปลั๊กอิน
เพิ่ม dts() ลงในอาร์เรย์ปลั๊กอิน โดยปลั๊กอินจะทำงานหลังการคอมไพล์เพื่อสร้างประกาศลงใน dist
import dts from "vite-plugin-dts";
export default defineConfig({
plugins: [vue(), dts()]
});insertTypesEntry
ตัวเลือก insertTypesEntry จะสร้างจุดเข้า index.d.ts เดียวที่ส่งออกชนิดข้อมูลทั้งหมดของคุณอีกครั้ง โดยสอดคล้องกับจุดเข้า JS ของคุณ
dts({
insertTypesEntry: true
})ไฟล์ d.ts ที่สร้างขึ้น
หลังการสร้าง dist จะมีไฟล์ .d.ts ที่สะท้อนโครงสร้างต้นฉบับของคุณ พร้อมประกาศจุดเข้าที่รวมไว้ ไฟล์เหล่านี้อธิบายพร็อพของคอมโพเนนต์ เหตุการณ์ที่ส่งออก และรายการส่งออก
// dist/index.d.ts
export { MyButton } from "./MyButton.vue";
// dist/MyButton.vue.d.ts describes its propsฟิลด์ types ใน package.json
ชี้ผู้ใช้แพ็กเกจไปยังประกาศจุดเข้าด้วยฟิลด์ types (หรือ typings) เพื่อให้ TypeScript แก้ไขชนิดข้อมูลของไลบรารีได้
{
"types": "./dist/index.d.ts"
}ชนิดข้อมูลในแผนผังการส่งออก
แพ็กเกจสมัยใหม่ยังเปิดเผยชนิดข้อมูลแยกตามจุดเข้าในแผนผัง exports เพื่อให้การนำเข้าจากเส้นทางย่อยแก้ไขได้อย่างถูกต้อง
{
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/my-ui-lib.es.js"
}
}
}การเติมชื่อคอมโพเนนต์ทั่วทั้งระบบโดยอัตโนมัติ
เมื่อผู้ใช้แพ็กเกจลงทะเบียนคอมโพเนนต์ของคุณทั่วทั้งระบบ TypeScript จำเป็นต้องประกาศคอมโพเนนต์เหล่านั้นในอินเทอร์เฟซ GlobalComponents เพื่อให้เติมชื่อในแม่แบบและตรวจสอบพร็อพได้โดยอัตโนมัติ
การเพิ่มข้อมูลให้ GlobalComponents
ส่งส่วนเพิ่มของโมดูลที่เพิ่มคอมโพเนนต์ของคุณลงใน GlobalComponents ของ vue ผู้ใช้แพ็กเกจที่อ้างอิงชนิดข้อมูลของคุณจะได้รับ IntelliSense ในแม่แบบ
// global.d.ts
import MyButton from "./MyButton.vue";
declare module "vue" {
export interface GlobalComponents {
MyButton: typeof MyButton;
}
}
export {};การกำหนดชนิดข้อมูลพร็อพของคอมโพเนนต์
ใช้ defineProps ร่วมกับชนิดข้อมูล TypeScript เพื่อให้ประกาศที่สร้างขึ้นส่งชนิดข้อมูลพร็อพที่ถูกต้องไปยังผู้ใช้แพ็กเกจ
// MyButton.vue <script setup lang="ts">
defineProps<{
label: string;
disabled?: boolean;
}>();การตรวจสอบชนิดข้อมูล
ก่อนเผยแพร่ ให้เรียกใช้ tsc --noEmit ในแอปตัวอย่างที่ใช้แพ็กเกจ (หรือใช้เครื่องมืออย่าง attw/are-the-types-wrong) เพื่อยืนยันว่าประกาศสามารถแก้ไขได้และมีการตรวจสอบพร็อพ
npx tsc --noEmitตรวจสอบอย่างรวดเร็ว
การเพิ่มข้อมูลให้ GlobalComponents มอบอะไรแก่ผู้ใช้ไลบรารี
สรุป
ใช้ vite-plugin-dts ร่วมกับ insertTypesEntry เพื่อสร้างไฟล์ .d.ts ชี้ฟิลด์ types ของ package.json (รวมถึงแผนผัง exports) ไปยังประกาศจุดเข้า และส่งส่วนเพิ่มของ GlobalComponents เพื่อให้ผู้ใช้แพ็กเกจเติมชื่อในแม่แบบโดยอัตโนมัติ กำหนดชนิดข้อมูลพร็อพด้วย defineProps และตรวจสอบด้วย tsc --noEmit
คำถามที่พบบ่อย
บทเรียน “คำประกาศ TypeScript สำหรับไลบรารีคอมโพเนนต์” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “คำประกาศ TypeScript สำหรับไลบรารีคอมโพเนนต์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “คำประกาศ TypeScript สำหรับไลบรารีคอมโพเนนต์”
vite-plugin-dts การสร้างไฟล์ .d.ts และการกำหนดชนิด props ของคอมโพเนนต์สำหรับผู้ใช้ไลบรารี คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “คำประกาศ TypeScript สำหรับไลบรารีคอมโพเนนต์” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การกำหนดค่าโหมดไลบรารีของ Vite
- คำประกาศ TypeScript สำหรับไลบรารีคอมโพเนนต์
- การตัดโค้ดที่ไม่ใช้และการนำเข้าอัตโนมัติ
- การเผยแพร่ไปยัง npm และการกำหนดเวอร์ชันเชิงความหมาย