0Pricing
TypeScript Academy · บทเรียน

// @ts-check ใน JS และ JSDoc เพื่อรับชนิดข้อมูล

เปิดใช้การตรวจสอบชนิดข้อมูลใน .js ด้วย // @ts-check และ JSDoc เพิ่ม @param/@returns, @type/@typedef และ @template สำหรับรูปแบบเจเนอริก พร้อมกำหนดค่า tsconfig เพื่อย้ายระบบทีละน้อย

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

บทนำ

เป้าหมาย: รับประโยชน์จาก TypeScript ภายในไฟล์ .js คุณจะเปิดใช้ // @ts-check เพิ่มชนิด JSDoc และกำหนดค่า tsconfig เพื่อทยอยนำมาใช้

  • การตรวจสอบรายไฟล์เทียบกับทั้งโครงการ
  • @param, @returns, @type, @typedef
  • @template สำหรับตัวช่วยที่มีลักษณะคล้ายแบบทั่วไป

เปิดใช้การตรวจสอบ

เพิ่ม // @ts-check ที่ด้านบนของไฟล์ .js ใช้ @param/@returns เพื่ออธิบายและกำหนดชนิดให้ฟังก์ชัน

// calculator.js
// @ts-check

/**
 * Adds two numbers.
 * @param {number} a
 * @param {number} b
 * @returns {number}
 */
export function add(a, b) {
  return a + b
}

// Usage: type errors appear if you pass non-numbers
// add("2", 3) // TS will flag this in JS

การกำหนดชนิดและชนิดข้อมูล

ใช้ @typedef เพื่อกำหนดรูปร่างที่นำกลับมาใช้ได้ และใช้ @type เพื่อใส่คำอธิบายชนิดให้ตัวแปร ฟิลด์ที่ไม่บังคับจะทำเครื่องหมายด้วย ?

// models.js
// @ts-check

/** @typedef {{ id: string; name: string; age?: number }} User */

/** @type {User} */
export const currentUser = { id: "u1", name: "Ada" }

/**
 * Greets a user.
 * @param {User} u
 * @returns {string}
 */
export function greet(u) {
  return `Hello, ${u.name}!`
}

พารามิเตอร์แบบแม่แบบ

@template ใช้แนะนำพารามิเตอร์ชนิดสำหรับฟังก์ชันใน JS ที่มีลักษณะคล้ายแบบทั่วไป การอนุมานจะทำงานที่จุดเรียกใช้

// helpers.js
// @ts-check

/**
 * Maps items with a function, preserving types.
 * @template T,U
 * @param {T[]} items
 * @param {(x: T) => U} f
 * @returns {U[]}
 */
export function map(items, f) {
  const out = []
  for (const x of items) out.push(f(x))
  return out
}

// Inference: T=number, U=string
// map([1,2], n => n.toFixed(2))

tsconfig สำหรับ JS

ทั้งโครงการ: เปิดใช้ checkJs สำหรับไฟล์ .js ทั้งหมด ตั้งค่า allowJs เพื่อรวมไฟล์ JS ไว้ในโปรแกรม ใช้ noEmit เมื่อเครื่องมือรวมชุดจัดการผลลัพธ์

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "checkJs": true,
    "allowJs": true,
    "strict": true,
    "noEmit": true
  },
  "include": ["./**/*.js"],
  "exclude": ["node_modules"]
}

เคล็ดลับการย้ายระบบ

เคล็ดลับการย้ายระบบ:

  • เริ่มจากไฟล์สำคัญโดยใช้ // @ts-check
  • สร้าง @typedef ขนาดเล็กสำหรับรูปร่างที่ใช้ร่วมกัน
  • ค่อย ๆ เปลี่ยนชื่อเส้นทางสำคัญที่มีการใช้งานสูงเป็น .ts เมื่อชนิดมีความเสถียร

การตรวจสอบ ts-check

ตรวจสอบอย่างรวดเร็ว: จะเปิดใช้การตรวจสอบ TS ในไฟล์ .js ได้อย่างไร

สรุปทบทวน

สรุปทบทวน: เปิดใช้ // @ts-check เพิ่ม @param/@returns/@typedef/@template และทำให้ tsconfig สำหรับโครงการ JS เข้มงวดขึ้นก่อนย้ายไปใช้ .ts

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

บทเรียน “// @ts-check ใน JS และ JSDoc เพื่อรับชนิดข้อมูล” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “// @ts-check ใน JS และ JSDoc เพื่อรับชนิดข้อมูล”

เปิดใช้การตรวจสอบชนิดข้อมูลใน .js ด้วย // @ts-check และ JSDoc เพิ่ม @param/@returns, @type/@typedef และ @template สำหรับรูปแบบเจเนอริก พร้อมกำหนดค่า tsconfig เพื่อย้ายระบบทีละน้อย คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “// @ts-check ใน JS และ JSDoc เพื่อรับชนิดข้อมูล” ใช้เวลานานแค่ไหน

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

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

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

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