บทนำสู่ดีคอเรเตอร์

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

ดีคอเรเตอร์มักใช้ในเฟรมเวิร์กอย่างแองกูลาร์เพื่อช่วยให้การพัฒนาง่ายขึ้น

ดีคอเรเตอร์ทำงานอย่างไร

ดีคอเรเตอร์คือฟังก์ชันที่นำไปใช้กับคลาสหรือสมาชิกของคลาส (เมธอด คุณสมบัติ และอื่น ๆ)

ตัวอย่างเช่น @Component ในแองกูลาร์คือดีคอเรเตอร์ที่เพิ่มข้อมูลกำกับให้คลาสเพื่อกำหนดให้คลาสนั้นเป็นคอมโพเนนต์

การใช้ดีคอเรเตอร์ในตัว

TypeScript มีดีคอเรเตอร์ในตัว เช่น:

• @readonly: ทำให้คุณสมบัติเป็นแบบอ่านได้อย่างเดียว
• @enumerable: ควบคุมว่าคุณสมบัติจะนับรวมได้หรือไม่

ดีคอเรเตอร์เหล่านี้ช่วยปรับเปลี่ยนการทำงานของคุณสมบัติหรือเมธอดได้โดยตรง

การสร้างดีคอเรเตอร์อย่างง่าย

คุณสามารถสร้างดีคอเรเตอร์ของคุณเองเพื่อบันทึกข้อความหรือเพิ่มความสามารถได้:

นำไปใช้กับคุณสมบัติ: @Log

function Log(target: any, propertyName: string) {
  console.log(`Property ${propertyName} was accessed`);
}

ดีคอเรเตอร์ของคลาส

ดีคอเรเตอร์ของคลาสใช้เพื่อปรับเปลี่ยนหรือเพิ่มความสามารถให้การทำงานของคลาสทั้งคลาส:

function SimpleDecorator(constructor: Function) {
  console.log(`${constructor.name} is decorated`);
}

นำไปใช้กับคลาส: @SimpleDecorator

function SimpleDecorator(constructor: Function) {
  console.log(`${constructor.name} is decorated`);
}

ดีคอเรเตอร์ของเมธอด

ดีคอเรเตอร์ของเมธอดใช้ปรับเปลี่ยนการทำงานของเมธอดในคลาส:

ใช้กับเมธอด: @LogMethod

function LogMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  console.log(`Method ${propertyKey} was called`);
}

การใช้ดีคอเรเตอร์ในแองกูลาร์

แองกูลาร์พึ่งพาดีคอเรเตอร์เป็นอย่างมากเพื่อเพิ่มข้อมูลกำกับให้คอมโพเนนต์:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {}

ดีคอเรเตอร์ @Component ใช้กำหนดคลาสให้เป็นคอมโพเนนต์ของแองกูลาร์

แนวปฏิบัติที่ดีในการใช้ดีคอเรเตอร์

เมื่อใช้ดีคอเรเตอร์:

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

ขอแสดงความยินดี

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