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

เดคอเรเตอร์ของเมธอดและพร็อพเพอร์ตี

ตกแต่งเมธอดและพร็อพเพอร์ตีแต่ละรายการ

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

ยินดีต้อนรับ

บทเรียนนี้ครอบคลุมเดคอเรเตอร์เมธอดและคุณสมบัติใน TypeScript

บทนำ

เดคอเรเตอร์เป็นข้อเสนอ JavaScript ระยะที่ 3 และเป็นฟีเจอร์ทดลองของ TypeScript สำหรับเพิ่มเมทาดาทาและแก้ไขคลาสกับสมาชิกของคลาส

แนวคิดหลัก

เดคอเรเตอร์คือฟังก์ชันที่นำไปใช้กับคลาส เมธอด คุณสมบัติ หรือพารามิเตอร์โดยใช้ไวยากรณ์ @
@sealed
class BugReport {
  type = 'report';
  title: string;
  constructor(t: string) { this.title = t; }
}

เดคอเรเตอร์คลาส

เดคอเรเตอร์คลาสได้รับฟังก์ชันตัวสร้างและสามารถส่งคืนเวอร์ชันที่แก้ไขแล้วได้
function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}

เดคอเรเตอร์เมธอด

เดคอเรเตอร์เมธอดได้รับเป้าหมาย ชื่อคุณสมบัติ และตัวบอกคุณสมบัติ
function log(target: any, key: string, desc: PropertyDescriptor) {
  const orig = desc.value;
  desc.value = function(...args: any[]) {
    console.log('Calling', key);
    return orig.apply(this, args);
  };
}

เดคอเรเตอร์คุณสมบัติ

เดคอเรเตอร์คุณสมบัติได้รับเป้าหมายและคีย์คุณสมบัติ แต่ไม่สามารถดักจับการอ่านหรือการเขียนค่าได้โดยตรง
function readonly(target: any, key: string) {
  Object.defineProperty(target, key, { writable: false });
}

เดคอเรเตอร์พารามิเตอร์

เดคอเรเตอร์พารามิเตอร์ได้รับเป้าหมาย ชื่อเมธอด และดัชนีพารามิเตอร์
function required(target: any, key: string, index: number) {
  const meta = Reflect.getMetadata('required', target, key) || [];
  meta.push(index);
  Reflect.defineMetadata('required', meta, target, key);
}

โรงงานเดคอเรเตอร์

โรงงานเดคอเรเตอร์คือฟังก์ชันที่ส่งคืนเดคอเรเตอร์ โดยรับพารามิเตอร์การกำหนดค่า
function role(name: string) {
  return function(target: any, key: string) {
    Reflect.defineMetadata('role', name, target, key);
  };
}

class UserController {
  @role('admin')
  deleteUser() {}
}

เดคอเรเตอร์ของ NestJS

NestJS ใช้เดคอเรเตอร์อย่างกว้างขวางสำหรับตัวควบคุม การฉีดการพึ่งพา และการกำหนดเส้นทาง
@Controller('users')
class UsersController {
  constructor(private usersService: UsersService) {}

  @Get()
  findAll(): User[] {
    return this.usersService.findAll();
  }
}

reflect-metadata

เดคอเรเตอร์มักทำงานร่วมกับโพลีฟิลล์ reflect-metadata เพื่อจัดเก็บและเรียกคืนเมทาดาทาขณะทำงาน
import 'reflect-metadata';
// Enable in tsconfig: experimentalDecorators: true, emitDecoratorMetadata: true

ลำดับของเดคอเรเตอร์

เดคอเรเตอร์หลายตัวในการประกาศเดียวกันจะถูกนำไปใช้จากล่างขึ้นบน โดยตัวที่เขียนล่าสุดจะถูกประเมินก่อน
@first
@second
class Example {}
// Applied: second first, then first

ตรวจสอบอย่างรวดเร็ว

ต้องใช้การกำหนดค่า TypeScript ใดจึงจะใช้เดคอเรเตอร์ได้

สรุปทบทวน

เดคอเรเตอร์ใช้ไวยากรณ์ @ เพื่อแก้ไขคลาส เมธอด คุณสมบัติ และพารามิเตอร์ โดยเปิดใช้งานด้วย experimentalDecorators ใน tsconfig และนิยมใช้อย่างแพร่หลายในเฟรมเวิร์กอย่าง NestJS และ Angular

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

บทเรียน “เดคอเรเตอร์ของเมธอดและพร็อพเพอร์ตี” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “เดคอเรเตอร์ของเมธอดและพร็อพเพอร์ตี”

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

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

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

บทเรียน “เดคอเรเตอร์ของเมธอดและพร็อพเพอร์ตี” ใช้เวลานานแค่ไหน

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

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

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

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

  1. เดคอเรเตอร์คลาส: การห่อหุ้มพฤติกรรม
  2. เดคอเรเตอร์ของเมธอดและพร็อพเพอร์ตี
  3. เดคอเรเตอร์ของพารามิเตอร์และเมทาดาทา
  4. เดคอเรเตอร์ในเฟรมเวิร์ก: ตัวอย่าง NestJS
← กลับไปที่ TypeScript Academy