angular - โค้ด TypeScript ต่อไปนี้ทำอะไร?

โค้ดต่อไปนี้นำมาจากซอร์สโค้ดของ Angular, di.ts.

export interface AttributeDecorator { 
  (name: string): any;
  new (name: string): Attribute;
}

ฉันเข้าใจว่านี่คืออินเตอร์เฟซ แต่สิ่งที่ new (name: string): Attribute กำลังทำอยู่คืออะไร และทำไมชื่อถึงมีสองประเภท คือ string และ any

โค้ดด้านบนตามด้วย

export interface Attribute { attributeName?: string; }
export const Attribute: AttributeDecorator = makeParamDecorator('Attribute', (attributeName?: string) => ({attributeName}));

คำตอบ #1

(name: string): any แสดงว่าฟังก์ชันที่ใช้อินเทอร์เฟซนี้ควรถูกเรียกใช้เป็นฟังก์ชันปกติ; ฟังก์ชันนี้จะถูกเรียกพร้อมอาร์กิวเมนต์สตริง name และส่งค่ากลับเป็น any.

new (name: string): Attribute บ่งชี้ว่าฟังก์ชันที่ใช้งานอินเทอร์เฟซนี้ควรถูกใช้เป็นคอนสตรักเตอร์ ถูกเรียกด้วย new และจะคืนค่าออบเจ็กต์ Attribute.

อินเทอร์เฟซตัวตกแต่งนี้อธิบายข้อเท็จจริงที่ว่าฟังก์ชันตกแต่งของ Angular สามารถใช้ได้ทั้งในฐานะฟังก์ชันตัวตกแต่งพารามิเตอร์ @Attribute(...) และ new Attribute(...) คอนสตรัคเตอร์ และพฤติกรรมของพวกมันจะแตกต่างกันเมื่อถูกเรียกใช้งานแบบนั้น

new Attribute(...) สามารถใช้สำหรับคำอธิบายใน ES5 และ ES6 ได้ ดังที่แสดงในคำตอบนี้

ฟังก์ชันที่ถูกอธิบายโดยอินเทอร์เฟซนี้และสร้างโดยโรงงาน makeParamDecorator ควรทำงานประมาณดังนี้:

// decorator factory
const MyAttributeDecorator = function (attributeName?: string) {
  if (new.target)
    // Attribute object
    return { attributeName };
  else
    // parameter decorator
    return (target, prop, paramIndex) => { ... };
}