วัตถุประสงค์ของ string & keyof Type ใน template literals ของ TypeScript

ฉันกำลังอ่านคู่มือ TypeScript (ลิงก์) และพบตัวอย่างนี้เกี่ยวกับการเพิ่มฟังก์ชัน "onChange" ให้กับคุณสมบัติของชนิดข้อมูล (playground)

type PropEventSource<Type> = {
    on(eventName: `${string & keyof Type}Changed`, callback: (newValue: any) => void): void;
};
/// Create a "watched object" with an 'on' method
/// so that you can watch for changes to properties.
declare function makeWatchedObject<Type>(obj: Type): Type & PropEventSource<Type>;

แต่ฉันไม่เข้าใจว่าทำไมส่วน "string &" จึงจำเป็น ตัวอย่างเช่น ข้อความแสดงข้อผิดพลาดประเภทบอกอะไรเมื่อเรามาเขียนว่า

on(eventName: `${keyof Type}Changed`, callback: (newValue: any) => void): void;

?

ตามเอกสารของ keyof มันจะคืนค่าตัวอักษรหรือค่าตัวเลข ดังนั้นจุดประสงค์ของการเพิ่ม string & คืออะไร?

คำตอบ #1

keyof X ไม่ได้หมายถึง string เสมอไป คีย์สามารถเป็น string, number หรือ Symbol ข้อจำกัด string & ป้องกันไม่ให้รวมชื่อเหตุการณ์ Changed สำหรับคุณสมบัติที่ใช้คีย์เป็น number หรือ Symbol ของ Type นั่นคือเหตุผลที่เมื่อคุณลบมันออก คุณจะได้รับข้อผิดพลาดเกี่ยวกับประเภท symbol และ number

นี่คือตัวอย่าง:

const obj = {
    [Symbol.toPrimitive]: () => 42,
    x: 1,
    y: 2,
    42: 42,
};

const x = makeWatchedObject(obj);
x.on()
//   ^−−− eventName is shown as "xChanged" | "yChanged", it doesn't have the
//        Symbol property or the 42 property.

ลิงก์สนามเด็กเล่น