V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ChrisFreeMan
V2EX  ›  TypeScript

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

  •  
  •   ChrisFreeMan · 251 天前 · 1780 次点击
    这是一个创建于 251 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    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 条回复    2024-04-16 15:10:27 +08:00
    ChrisFreeMan
        1
    ChrisFreeMan  
    OP
       251 天前
    没事...突然想起 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
        2
    Opportunity  
       251 天前
    你确定能这么写?
    ChrisFreeMan
        3
    ChrisFreeMan  
    OP
       251 天前
    @Opportunity 吃完饭回来试了下确实不能😅
    Opportunity
        4
    Opportunity  
       251 天前   ❤️ 1
    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
        5
    nagisaushio  
       251 天前 via Android
    mixin
    sapjax
        6
    sapjax  
       251 天前
    HTMLButtonElement 为什么不继承 HTMLElement ?
    ChrisFreeMan
        7
    ChrisFreeMan  
    OP
       251 天前
    @Opportunity 学到了👍长见识了。验证了可以通过编译。
    ChrisFreeMan
        8
    ChrisFreeMan  
    OP
       251 天前
    @sapjax 这是 web components 有一些情况子类需要调用元素自身的方法,这只是其中一个例子,比如还有 HTMLDialogElement, HTMLCanvasElement
    echo0x000001
        9
    echo0x000001  
       251 天前
    这种情况要么再基于 HTMLElement 开发一个 themeWather 基类,两个子类继承这个基类。要么使用 mixin 实现多重继承,参考这个库 https://www.npmjs.com/package/ts-mixer
    ChrisFreeMan
        10
    ChrisFreeMan  
    OP
       251 天前
    @echo0x000001 暂时先不拆了,先不过度的设计,不然东西做不完。我的品味还没到那里就不强迫自己了。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3713 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 10:34 · PVG 18:34 · LAX 02:34 · JFK 05:34
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.