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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- TypeScript 5.0: มาตรฐานเดคอเรเตอร์และพารามิเตอร์ชนิด const
- TypeScript 5.1-5.2: การอนุมานที่ปรับปรุงขึ้น
- TypeScript 5.3-5.4: การจำกัดชนิดแบบใหม่และ NoInfer
- TypeScript 5.5+: คำประกาศแบบแยกส่วนและสิ่งที่เพิ่มขึ้น