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

TypeScript 5.3-5.4: การจำกัดชนิดแบบใหม่และ NoInfer

ประยุกต์ใช้ชนิดอรรถประโยชน์ NoInfer และการจำกัดชนิดใหม่ใน switch/case

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

ภาพรวม TypeScript 5.3

TypeScript 5.3 (พฤศจิกายน 2023) ปรับปรุงการทำให้ชนิดแคบลงสำหรับคำสั่ง switch/case เพิ่มการรองรับชนิดที่นำเข้าผ่าน JSDoc และเพิ่มโหมดการแก้ไขใน import type

// npm install typescript@5.3

การปรับปรุงการทำให้ชนิดแคบลงใน Switch/Case

TS 5.3 ปรับปรุงการทำให้ชนิดแคบลงภายในคำสั่ง switch โดยเฉพาะยูเนียนที่จำแนกด้วยหลายกรณี

type Result = { status: "ok"; data: string } | { status: "err"; code: number };

function handle(r: Result) {
  switch (r.status) {
    case "ok":
      console.log(r.data);   // r: { status: "ok"; data: string } — narrowed
      break;
    case "err":
      console.log(r.code);   // r: { status: "err"; code: number } — narrowed
      break;
  }
}

ชนิดการนำเข้าใน JSDoc

TS 5.3 เพิ่มการรองรับแท็ก JSDoc @import สำหรับการนำเข้าเฉพาะชนิดในไฟล์ JavaScript

/** @import { User } from "./types.js" */

/** @param {User} user */
function greet(user) {
  console.log(user.name);
}

โหมดการแก้ไขในการนำเข้าเฉพาะชนิด

TS 5.3 อนุญาตให้ระบุ resolution-mode ใน import type เพื่อควบคุมว่าการนำเข้าจะถูกแก้ไขเป็น CommonJS หรือ ESM

import type { User } from "some-library" with { "resolution-mode": "require" };

ภาพรวม TypeScript 5.4

TypeScript 5.4 เพิ่มชนิดยูทิลิตี NoInfer รักษาการทำให้ชนิดแคบลงในคลอเชอร์ และเพิ่มชนิดสำหรับ Object.groupBy กับ Map.groupBy

// npm install typescript@5.4

ชนิดยูทิลิตี NoInfer<T>

NoInfer ป้องกันไม่ให้ TypeScript ใช้อาร์กิวเมนต์แบบ泛રિકเป็นจุดอนุมาน ทำให้ต้องอนุมานชนิดจากอาร์กิวเมนต์อื่นเท่านั้น

function createStore<T>(initial: T, onChange: (val: NoInfer<T>) => void) {
  // T inferred from initial, not from onChange callback
}

createStore({ count: 0 }, (val) => {
  // val: { count: number } — inferred from initial only
});

เหตุผลที่ NoInfer มีความสำคัญ

หากไม่มี NoInfer TypeScript จะพยายามอนุมาน T จากอาร์กิวเมนต์ทั้งสองตัว และอาจขยายชนิดโดยไม่คาดคิด

// Before NoInfer: T may be widened by the callback
function createStore<T>(initial: T, onChange: (val: T) => void) {}
createStore({ count: 0 }, (val: { count: number; extra: string }) => {});
// T widened to include extra — not what we want

การรักษาการทำให้ชนิดแคบลงหลังคลอเชอร์

TS 5.4 รักษาการทำให้ชนิดแคบลงในคลอเชอร์ เมื่อไม่มีการกำหนดค่าใหม่ให้ตัวแปรที่ถูกทำให้ชนิดแคบลงหลังจากคลอเชอร์

function process(val: string | null) {
  if (!val) return;
  // val: string
  setTimeout(() => {
    console.log(val.toUpperCase()); // TS 5.4: still string — not widened
  }, 100);
}

การระบุชนิดของ Object.groupBy

TS 5.4 เพิ่มชนิดสำหรับเมธอดสแตติก Object.groupBy และ Map.groupBy ของ ES2024

const users = [
  { name: "Alice", role: "admin" },
  { name: "Bob", role: "user" },
];
const grouped = Object.groupBy(users, (u) => u.role);
// grouped: { [role: string]: { name: string; role: string }[] }

การสร้างไฟล์ประกาศที่ปรับปรุงแล้ว

TS 5.4 ปรับปรุงการสร้างไฟล์ประกาศสำหรับกรณีซับซ้อนที่เกี่ยวข้องกับชนิดแบบแมปและชนิดแบบมีเงื่อนไข ช่วยลดข้อผิดพลาดที่ไม่เป็นจริงในไฟล์ .d.ts ที่สร้างขึ้น

// Fewer "Type ... is not assignable to type ..." errors
// in generated declaration files from TS 5.4 onward

ทบทวน: TS 5.3-5.4

TS 5.3: ปรับปรุงการทำให้ชนิดแคบลงใน switch/case และรองรับ JSDoc @import ส่วน TS 5.4: เพิ่ม NoInfer เพื่อป้องกันจุดอนุมานชนิดที่ไม่ต้องการ รักษาการทำให้ชนิดแคบลงในคลอเชอร์ และเพิ่มชนิดของ Object.groupBy

ตรวจสอบความเข้าใจ

NoInfer ป้องกันสิ่งใด

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

TS 5.3 ปรับปรุงการทำให้ชนิดแคบลงใน switch/case และเพิ่มชนิดการนำเข้าสำหรับ JSDoc ส่วน TS 5.4 เพิ่ม NoInfer เพื่อควบคุมจุดอนุมาน รักษาการทำให้ชนิดแคบลงข้ามคลอเชอร์ และเพิ่มชนิดของ Object.groupBy สำหรับ ES2024

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

บทเรียน “TypeScript 5.3-5.4: การจำกัดชนิดแบบใหม่และ NoInfer” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “TypeScript 5.3-5.4: การจำกัดชนิดแบบใหม่และ NoInfer”

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

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

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

บทเรียน “TypeScript 5.3-5.4: การจำกัดชนิดแบบใหม่และ NoInfer” ใช้เวลานานแค่ไหน

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

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

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

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

  1. TypeScript 5.0: มาตรฐานเดคอเรเตอร์และพารามิเตอร์ชนิด const
  2. TypeScript 5.1-5.2: การอนุมานที่ปรับปรุงขึ้น
  3. TypeScript 5.3-5.4: การจำกัดชนิดแบบใหม่และ NoInfer
  4. TypeScript 5.5+: คำประกาศแบบแยกส่วนและสิ่งที่เพิ่มขึ้น
← กลับไปที่ TypeScript Academy