คำอธิบายชนิด JSDoc ในฐานะสะพานเชื่อม
เพิ่มชนิดให้ไฟล์ JS ด้วย JSDoc ก่อนการแปลง
คำอธิบายชนิด JSDoc ในฐานะสะพานเชื่อม เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
JSDoc ในฐานะสะพานเชื่อมสู่ TypeScript
TypeScript สามารถอ่านคำกำกับชนิดข้อมูล JSDoc ในไฟล์ JavaScript ได้เมื่อเปิดใช้ checkJs: true วิธีนี้ช่วยให้คุณเพิ่มชนิดข้อมูลลงใน JS ได้โดยไม่ต้องเปลี่ยนชื่อไฟล์
/** @type {string} */
let name = "Alice"; // TypeScript checks this as string@param และ @returns
ใส่คำกำกับพารามิเตอร์ของฟังก์ชันและชนิดข้อมูลที่ส่งคืนโดยใช้แท็ก JSDoc
/**
* @param {string} name
* @param {number} age
* @returns {string}
*/
function greet(name, age) {
return `${name} is ${age}`;
}@typedef สำหรับชนิดข้อมูลออบเจกต์
ใช้ @typedef เพื่อกำหนดชื่อแทนชนิดข้อมูลที่นำกลับมาใช้ซ้ำได้ใน JSDoc
/**
* @typedef {Object} User
* @property {string} id
* @property {string} name
* @property {boolean} isActive
*/
/** @type {User} */
const user = { id: "1", name: "Alice", isActive: true };@template สำหรับชนิดข้อมูลทั่วไป
ใช้ @template เพื่อเขียนฟังก์ชันแบบทั่วไปใน JSDoc
/**
* @template T
* @param {T[]} arr
* @returns {T | undefined}
*/
function first(arr) {
return arr[0];
}
// TypeScript infers: first<T>(arr: T[]): T | undefinedนำเข้าชนิดข้อมูลจากไฟล์ .ts
JSDoc รองรับ @type {import("./types").User} สำหรับนำเข้าชนิดข้อมูล TypeScript ไปยังไฟล์ JS
/** @type {import("./types").User} */
const admin = { id: "admin", name: "Admin", isActive: true };@ts-check สำหรับการตรวจสอบรายไฟล์
เพิ่ม // @ts-check ไว้ที่ด้านบนของไฟล์ JS เพื่อเปิดใช้การตรวจสอบ TypeScript เฉพาะไฟล์นั้น โดยไม่ต้องเปิดใช้ checkJs: true ทั่วทั้งโครงการ
// @ts-check
/** @type {number} */
const count = "oops"; // Error: string not assignable to number@ts-ignore และ @ts-expect-error
ระงับข้อผิดพลาดชนิดข้อมูล JSDoc ที่เฉพาะเจาะจงด้วยคำสั่งแบบแทรกในโค้ด โดยไม่ต้องปิดการตรวจสอบทั้งไฟล์
// @ts-ignore
const x = badFunction(); // single error suppressed
// @ts-expect-error
const y = anotherBad(); // error expected hereอีนัม JSDoc
จำลองอีนัมของ TypeScript ใน JSDoc โดยใช้ @enum
/** @enum {string} */
const Direction = { Left: "left", Right: "right", Up: "up" };การยืนยันชนิดข้อมูลใน JSDoc
ใช้ /** @type {SomeType} */ (expression) สำหรับการยืนยันชนิดข้อมูลของ JSDoc ซึ่งเทียบเท่ากับ as SomeType ของ TypeScript
const el = /** @type {HTMLInputElement} */ (document.getElementById("input"));
el.value; // el: HTMLInputElement — typedเมื่อใดควรย้ายไปใช้ .ts
คำกำกับ JSDoc เป็นเพียงสะพานเชื่อม ไม่ใช่จุดหมาย เมื่อไฟล์มีคำกำกับครบถ้วนและเสถียรแล้ว ให้เปลี่ยนชื่อเป็น .ts และลบความคิดเห็นชนิดข้อมูล JSDoc ออก โดยใช้ไวยากรณ์ดั้งเดิมของ TypeScript แทน
// Rename: utils.js → utils.ts
// Replace JSDoc: /** @param {string} x */ → (x: string)ทบทวน: JSDoc ในฐานะสะพานเชื่อม
คำกำกับชนิดข้อมูล JSDoc ช่วยให้ตรวจสอบ TypeScript ในไฟล์ JS ได้โดยไม่ต้องเปลี่ยนชื่อไฟล์ ใช้ @type, @param, @typedef และ @template เพื่อเพิ่มความปลอดภัยของชนิดข้อมูลทีละน้อยก่อนแปลงเป็น TypeScript ดั้งเดิม
ตรวจสอบความเข้าใจอย่างรวดเร็ว
แท็ก JSDoc ใดเปิดใช้การตรวจสอบ TypeScript ในไฟล์เดียวโดยไม่ต้องเปิดใช้ checkJs ทั่วโลก?
สิ่งที่คุณได้เรียนรู้
คำกำกับชนิดข้อมูล JSDoc เป็นสะพานเชื่อมระหว่าง JavaScript และ TypeScript ใช้ @type, @param, @typedef และ @template เพื่อเพิ่มชนิดข้อมูลให้ไฟล์ JS เปิดใช้การตรวจสอบรายไฟล์ด้วย // @ts-check แล้วแปลงเป็น TypeScript ดั้งเดิมเมื่อพร้อม
คำถามที่พบบ่อย
บทเรียน “คำอธิบายชนิด JSDoc ในฐานะสะพานเชื่อม” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “คำอธิบายชนิด JSDoc ในฐานะสะพานเชื่อม” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “คำอธิบายชนิด JSDoc ในฐานะสะพานเชื่อม”
เพิ่มชนิดให้ไฟล์ JS ด้วย JSDoc ก่อนการแปลง คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “คำอธิบายชนิด JSDoc ในฐานะสะพานเชื่อม” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม
ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- เริ่มการย้ายระบบ: allowJs และ checkJs
- คำอธิบายชนิด JSDoc ในฐานะสะพานเชื่อม
- กลยุทธ์การแปลงทีละไฟล์
- การจัดการไลบรารีภายนอกที่ไม่มีชนิด