TypeScript Academy · บทเรียน

TypeScript 5.0: มาตรฐานเดคอเรเตอร์และพารามิเตอร์ชนิด const

ใช้ข้อเสนอเดคอเรเตอร์ใหม่และพารามิเตอร์เจเนอริก const

บทเรียน 1 จาก 413 ขั้นตอน

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

ภาพรวม TypeScript 5.0

TypeScript 5.0 นำข้อเสนอเกี่ยวกับตัวตกแต่งมาตรฐานของ TC39 (ระยะที่ 3), พารามิเตอร์ชนิดข้อมูล const, ไวยากรณ์โมดูลแบบตรงตามต้นฉบับรูปแบบใหม่ และการปรับปรุงประสิทธิภาพครั้งสำคัญมาให้

// TS 5.0 release: March 2023
// npm install typescript@5

ตัวตกแต่งระยะที่ 3

TS 5.0 นำข้อเสนอเกี่ยวกับตัวตกแต่งมาตรฐานของ TC39 ระยะที่ 3 มาใช้ ซึ่งแตกต่างจากตัวตกแต่งแบบทดลองรุ่นเก่า ไม่จำเป็นต้องใช้ experimentalDecorators: true อีกต่อไป

// New standard decorator — no experimentalDecorators flag needed
function logged(target: Function, ctx: ClassDecoratorContext) {
  return class extends (target as any) {
    constructor(...args: any[]) {
      console.log("Creating", target.name);
      super(...args);
    }
  };
}

@logged
class User { constructor(public name: string) {} }

ออบเจกต์บริบทของตัวตกแต่ง

ตัวตกแต่งแบบใหม่จะได้รับออบเจกต์ ClassDecoratorContext หรือ MethodDecoratorContext ที่มีชนิดข้อมูล พร้อมข้อมูลเมตาเกี่ยวกับองค์ประกอบที่ถูกตกแต่ง

function sealed(_: Function, ctx: ClassDecoratorContext) {
  ctx.addInitializer(function(this: any) {
    Object.seal(this);
  });
}

ตัวตกแต่งเมธอดใน TS 5.0

ตัวตกแต่งเมธอดจะได้รับเมธอดและ ClassMethodDecoratorContext แทนลายเซ็นเดิม (target, key, descriptor)

function measure(_: Function, ctx: ClassMethodDecoratorContext) {
  return function(this: any, ...args: any[]) {
    const start = performance.now();
    const result = (_.apply as any)(this, args);
    console.log(ctx.name, performance.now() - start, "ms");
    return result;
  };
}

พารามิเตอร์ชนิดข้อมูล const

const ที่อยู่หน้าพารามิเตอร์ชนิดข้อมูลทำให้ TypeScript อนุมานชนิดข้อมูลแบบค่าตามตัวอักษรสำหรับอาร์กิวเมนต์ แทนที่จะขยายเป็นชนิดข้อมูลพื้นฐาน

function identity<const T>(val: T): T { return val; }
const a = identity("hello");      // type: "hello" (not string)
const b = identity([1, 2, 3]);    // type: readonly [1, 2, 3]

ชนิดข้อมูลทั่วไปแบบ const เทียบกับ as const

พารามิเตอร์ชนิดข้อมูล const จะใช้ผลของการทำให้ชนิดข้อมูลแคบลงโดยอัตโนมัติ ผู้เรียกจึงไม่จำเป็นต้องเพิ่ม as const ในทุกจุดที่เรียกใช้

// Without const param: callers need as const
function makeRoute<T extends string>(path: T) { return path; }
const r1 = makeRoute("/home" as const); // "/home"

// With const param: automatic
function makeRoute2<const T extends string>(path: T) { return path; }
const r2 = makeRoute2("/home"); // "/home" — no as const needed

การแก้ไขโมดูลโดยเครื่องมือรวมชุดโมดูล

TS 5.0 เพิ่ม moduleResolution: "bundler" สำหรับโครงการที่ใช้ Vite, esbuild หรือเครื่องมือรวมชุดโมดูลลักษณะเดียวกัน ซึ่งจัดการการแก้ไขโมดูลด้วยตนเอง

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "bundler"
  }
}

verbatimModuleSyntax

verbatimModuleSyntax: true บังคับให้การนำเข้าที่ใช้เฉพาะชนิดข้อมูลใช้ import type เพื่อป้องกันการรั่วไหลของการนำเข้าขณะทำงาน

// tsconfig.json
{ "compilerOptions": { "verbatimModuleSyntax": true } }

// Now this errors: must be import type
import { User } from "./types"; // Error if User is only a type
import type { User } from "./types"; // OK

การปรับปรุงประสิทธิภาพ

TS 5.0 ปรับปรุงการแคชการสร้างชนิดข้อมูลและประสิทธิภาพของการทำให้ชนิดข้อมูลแคบลง ทำให้โครงการขนาดใหญ่ทำงานเร็วขึ้นโดยไม่ต้องแก้ไขโค้ด

# TS 5.0 compile benchmarks: ~10-15% faster on large projects

ย้ายจากตัวตกแต่งรุ่นเก่า

experimentalDecorators รุ่นเก่ายังคงใช้งานได้ แต่จะถูกยกเลิกในท้ายที่สุด ควรย้ายไปใช้ตัวตกแต่งของ TC39 เพื่อให้เข้ากันได้ในอนาคต

// Legacy: requires experimentalDecorators: true
@Component({ selector: "app-root" })
class AppComponent {}

// New TC39 decorator: no flag needed (but Angular/NestJS need updates)

ทบทวน: TypeScript 5.0

TypeScript 5.0 นำตัวตกแต่งมาตรฐานของ TC39, พารามิเตอร์ชนิดข้อมูล const สำหรับการอนุมานค่าตามตัวอักษรโดยอัตโนมัติ, moduleResolution: "bundler", verbatimModuleSyntax และการเพิ่มประสิทธิภาพครั้งสำคัญมาให้

ตรวจสอบความเข้าใจอย่างรวดเร็ว

const ที่อยู่หน้าพารามิเตอร์ชนิดข้อมูลทำอะไร?

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

TypeScript 5.0: ตัวตกแต่งมาตรฐานของ TC39 เข้ามาแทนที่ตัวตกแต่งแบบทดลอง พารามิเตอร์ชนิดข้อมูล const จะทำให้อาร์กิวเมนต์แคบลงเป็นชนิดข้อมูลแบบค่าตามตัวอักษรโดยอัตโนมัติ moduleResolution: "bundler" รองรับเครื่องมือสร้างสมัยใหม่ และ verbatimModuleSyntax บังคับใช้ import type

เริ่มต้นได้ฟรี

เรียนรู้ TypeScript ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส
101
บทเรียน
352

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

บทเรียน “TypeScript 5.0: มาตรฐานเดคอเรเตอร์และพารามิเตอร์ชนิด const” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “TypeScript 5.0: มาตรฐานเดคอเรเตอร์และพารามิเตอร์ชนิด const”

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

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

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

บทเรียน “TypeScript 5.0: มาตรฐานเดคอเรเตอร์และพารามิเตอร์ชนิด const” ใช้เวลานานแค่ไหน

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