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

TypeScript 5.1-5.2: การอนุมานที่ปรับปรุงขึ้น

สำรวจความเป็นอิสระของชนิดตัวตั้งค่าและตัวอ่าน รวมถึงการประกาศการใช้งาน

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

ภาพรวม TypeScript 5.1

TypeScript 5.1 ซึ่งเผยแพร่ในเดือนมิถุนายน 2023 ปรับปรุงความเป็นอิสระของชนิดข้อมูลตัวกำหนดและตัวอ่าน ความยืดหยุ่นของชนิดข้อมูลองค์ประกอบ JSX เคอร์เซอร์ที่เชื่อมโยงในเครื่องมือแก้ไข และการปรับปรุงประสิทธิภาพ

// npm install typescript@5.1

ความเป็นอิสระของชนิดข้อมูลตัวกำหนดและตัวอ่าน

ก่อนเวอร์ชัน 5.1 ตัวกำหนดและตัวอ่านต้องใช้ชนิดข้อมูลเดียวกัน ปัจจุบันตัวอ่านสามารถส่งคืนชนิดข้อมูลที่กว้างกว่าชนิดข้อมูลที่ตัวกำหนดยอมรับได้ ซึ่งมีประโยชน์สำหรับรูปแบบการบังคับแปลงชนิด

class Temperature {
  get celsius(): string { return this._c + "°C"; } // string
  set celsius(value: string | number) {             // string | number
    this._c = Number(value);
  }
  private _c = 0;
}

undefined ในฐานะองค์ประกอบลูกของ JSX

TS 5.1 อนุญาตให้คอมโพเนนต์ส่งคืน undefined ได้โดยตรงจากฟังก์ชันการแสดงผล นอกเหนือจาก null ซึ่งสอดคล้องกับลักษณะการทำงานของ React 18

// TS 5.1+: OK
function Widget(): undefined { return undefined; }
// Before 5.1: had to return null or JSX element

ความยืดหยุ่นของชนิดองค์ประกอบ JSX

ข้อจำกัดใหม่ JSX.ElementType เพิ่มความยืดหยุ่นให้โรงงาน JSX แบบกำหนดเอง ซึ่งมีประโยชน์สำหรับสภาพแวดล้อมที่ไม่ใช่ React

// Custom JSX element types supported more naturally in 5.1

ภาพรวม TypeScript 5.2

TypeScript 5.2 (เปิดตัวในเดือนสิงหาคม 2023) เพิ่มการประกาศ using (การจัดการทรัพยากรอย่างชัดเจน) เมทาดาทาของดีคอเรเตอร์ และเมธอดคัดลอกอาร์เรย์

// npm install typescript@5.2

การประกาศเพื่อจัดการทรัพยากร

using รองรับข้อเสนอการจัดการทรัพยากรอย่างชัดเจน โดยเมธอด [Symbol.dispose]() ของทรัพยากรจะถูกเรียกเมื่อทรัพยากรออกจากขอบเขต

// Requires lib: ["es2022", "esnext.disposable"]
function getConnection(): Disposable {
  const conn = openDb();
  return { [Symbol.dispose]() { conn.close(); } };
}

{
  using conn = getConnection();
  // conn.close() called automatically at block end
}

การล้างทรัพยากรแบบอะซิงโครนัส

await using ทำงานคล้ายกับ using แต่จะเรียกเมธอดอะซิงโครนัส [Symbol.asyncDispose]() เพื่อให้สามารถล้างทรัพยากรแบบอะซิงโครนัสได้

async function run() {
  await using db = await connectDb();
  // db[Symbol.asyncDispose]() called on exit
}

เมทาดาทาของดีคอเรเตอร์

TS 5.2 รองรับข้อเสนอเมทาดาทาของดีคอเรเตอร์จาก TC39 ทำให้ดีคอเรเตอร์สามารถแนบเมทาดาทาผ่าน Symbol.metadata ได้

function meta(value: string) {
  return (_: unknown, ctx: DecoratorContext) => {
    ctx.metadata[ctx.name] = value;
  };
}

@meta("service")
class MyService {}
console.log((MyService as any)[Symbol.metadata]); // { "MyService": "service" }

เมธอดคัดลอกอาร์เรย์

TS 5.2 เพิ่มชนิดสำหรับ Array.prototype.toSorted, toReversed, toSpliced และ with ซึ่งเป็นการดำเนินการกับอาร์เรย์แบบไม่เปลี่ยนแปลงข้อมูลเดิมจาก ES2023

const arr = [3, 1, 2];
const sorted = arr.toSorted(); // [1, 2, 3] — new array, arr unchanged
const reversed = arr.toReversed(); // [2, 1, 3]

การใช้การตั้งค่าใน tsconfig สำหรับ 5.2

หากต้องการใช้การประกาศ using ให้เพิ่มไลบรารี esnext.disposable ในการตั้งค่า TypeScript

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2022", "ESNext.Disposable"]
  }
}

ทบทวน: TS 5.1-5.2

TS 5.1: ชนิดของตัวรับและตัวกำหนดค่าที่เป็นอิสระต่อกัน และการส่งคืน JSX เป็น undefined ส่วน TS 5.2: การประกาศ using สำหรับการล้างทรัพยากรโดยอัตโนมัติ เมทาดาทาของดีคอเรเตอร์ และชนิดของเมธอดคัดลอกอาร์เรย์แบบไม่เปลี่ยนแปลงข้อมูลเดิม

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

การประกาศ using ใน TypeScript 5.2 ทำหน้าที่อะไร

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

TS 5.1 เพิ่มชนิดของตัวรับและตัวกำหนดค่าที่เป็นอิสระต่อกัน รวมถึงการส่งคืน JSX เป็น undefined ส่วน TS 5.2 เพิ่มการประกาศ using สำหรับการจัดการทรัพยากรโดยอัตโนมัติ เมทาดาทาของดีคอเรเตอร์ และชนิดของเมธอดคัดลอกอาร์เรย์แบบไม่เปลี่ยนแปลงข้อมูลเดิมจาก ES2023

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

บทเรียน “TypeScript 5.1-5.2: การอนุมานที่ปรับปรุงขึ้น” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “TypeScript 5.1-5.2: การอนุมานที่ปรับปรุงขึ้น”

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

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

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

บทเรียน “TypeScript 5.1-5.2: การอนุมานที่ปรับปรุงขึ้น” ใช้เวลานานแค่ไหน

บทเรียน 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