ChrisFreeMan

想请教个 TypeScript 抽象类继承父类的问题。

  •  
  •   ChrisFreeMan · Apr 16, 2024 · 3208 views
    This topic created in 941 days ago, the information mentioned may be changed or developed.

    我有两个抽象类,但是其结构是一样的,不同的是分别继承了不同的类,我要怎么简写这种情况。

    export abstract class DivComponentsManager extends HTMLElement {
      protected themeWatcher = themeWatcher
      protected disposeFuncs: (() => void)[] = []
    
      constructor() {
        super()
      }
    
      abstract renderView(): Promise<void>
    
      connectedCallback() {
        this.renderView()
      }
    
      disconnectedCallback() {
        this.disposeFuncs.forEach(func => func())
      }
    }
    
    export abstract class ButtonComponentsManager extends HTMLButtonElement {
      protected themeWatcher = themeWatcher
      protected disposeFuncs: (() => void)[] = []
    
      constructor() {
        super()
      }
    
      abstract renderView(): Promise<void>
    
      connectedCallback() {
        this.renderView()
      }
    
      disconnectedCallback() {
        this.disposeFuncs.forEach(func => func())
      }
    }
    
    
    10 replies  •  2024-04-16 15:10:27 +08:00
    ChrisFreeMan
    ChrisFreeMan
    OP
    Apr 16, 2024
    1
    没事...突然想起 gpt3.5 免费了,直接问出了答案。


    import { themeWatcher } from './themeWatcher'; // Import themeWatcher if not already imported

    export abstract class ComponentsManager<T extends HTMLElement | HTMLButtonElement> extends T {
    protected themeWatcher = themeWatcher;
    protected disposeFuncs: (() => void)[] = [];

    constructor() {
    super();
    }

    abstract renderView(): Promise<void>;

    connectedCallback() {
    this.renderView();
    }

    disconnectedCallback() {
    this.disposeFuncs.forEach(func => func());
    }
    }
    Opportunity
    Opportunity
    Apr 16, 2024
    2
    你确定能这么写?
    ChrisFreeMan
    ChrisFreeMan
    OP
    Apr 16, 2024
    3
    @Opportunity 吃完饭回来试了下确实不能😅
    Opportunity
    Opportunity
    Apr 16, 2024❤️1
    4
    function ComponentsManager<T extends (new (...args: any[]) => HTMLElement)>(base: T) {
    abstract class ComponentsManager extends base {

    abstract renderView(): Promise<void>;

    connectedCallback() {
    this.renderView();
    }
    }
    return ComponentsManager;
    }

    export abstract class DivComponentsManager extends ComponentsManager(HTMLDivElement) {
    }

    export abstract class ButtonComponentsManager extends ComponentsManager(HTMLButtonElement) {
    }
    nagisaushio
    nagisaushio
    Apr 16, 2024 via Android
    5
    mixin
    sapjax
    sapjax
    Apr 16, 2024
    6
    HTMLButtonElement 为什么不继承 HTMLElement ?
    ChrisFreeMan
    ChrisFreeMan
    OP
    Apr 16, 2024
    7
    @Opportunity 学到了👍长见识了。验证了可以通过编译。
    ChrisFreeMan
    ChrisFreeMan
    OP
    Apr 16, 2024
    8
    @sapjax 这是 web components 有一些情况子类需要调用元素自身的方法,这只是其中一个例子,比如还有 HTMLDialogElement, HTMLCanvasElement
    echo0x000001
    echo0x000001
    Apr 16, 2024
    9
    这种情况要么再基于 HTMLElement 开发一个 themeWather 基类,两个子类继承这个基类。要么使用 mixin 实现多重继承,参考这个库 https://www.npmjs.com/package/ts-mixer
    ChrisFreeMan
    ChrisFreeMan
    OP
    Apr 16, 2024
    10
    @echo0x000001 暂时先不拆了,先不过度的设计,不然东西做不完。我的品味还没到那里就不强迫自己了。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   2110 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 01:20 · PVG 09:20 · LAX 17:20 · JFK 20:20
    ♥ Do have faith in what you're doing.