ค้นหาเว็บไซต์

TypeScript - การตรวจสอบชนิดข้อมูลอย่างเข้มงวดสำหรับชนิดของคุณสมบัติด้วยตัวตกแต่งคุณสมบัติ


มีวิธีใดในการตรวจสอบประเภทของพร็อพเพอร์ตี้ที่ถูกตกแต่งใน Typescript หรือไม่? ฉันต้องการพร็อพเพอร์ตี้เดคอเรเตอร์ที่ทำงานได้เฉพาะกับพร็อพเพอร์ตี้ของคลาสประเภท boolean แต่ไม่ใช่กับเช่น string (ตัวอย่างด้านล่าง) สิ่งนี้เป็นไปได้หรือไม่?

(หมายเหตุ: ฉันไม่ต้องการการตรวจสอบเวลารันผ่าน reflect-metadata แค่ต้องการคำเตือนประเภทเมื่อคอมไพล์ด้วย Typescript)

function booleanProperty<T extends HTMLElement>(target: T, prop: string) {
  // `target` will be the class' prototype
  Reflect.defineProperty(target, prop, {
    get(this: T): boolean {
      return this.hasAttribute(prop);
    },
    set(this: T, value: boolean): void {
      if (value) {
        this.setAttribute(prop, '');
      } else {
        this.removeAttribute(prop);
      }
    }
  });
}

class MyElement extends HTMLElement {
  @booleanProperty
  foo: boolean;

  @booleanProperty
  bar: string; // TS compile error
}
customElements.define('my-element', MyElement);

คำตอบ #1

แล้วอันนี้ล่ะ?

function booleanProperty<
  T extends HTMLElement & Record<K, boolean>,
  K extends string>(target: T, prop: K) {
    // ... impl here
}

ค่าที่ส่งเข้ามา target ต้องเป็น HTMLElement ที่มีคุณสมบัติ boolean ที่คีย์ K ซึ่ง K คือชนิดของ prop ที่ส่งเข้ามา มาลองดูกันว่าใช้งานได้หรือไม่:

class MyElement extends HTMLElement {
  @booleanProperty // okay
  foo: boolean;

  @booleanProperty // error
  bar: string;
}

ดูดีสำหรับฉันนะ นั่นใช้ได้สำหรับคุณไหม?

บทความที่เกี่ยวข้อง