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