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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 219 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

219 天前

没事...突然想起 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

219 天前

你确定能这么写？

ChrisFreeMan

219 天前

@Opportunity 吃完饭回来试了下确实不能😅

Opportunity

219 天前

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

219 天前 via Android

mixin

sapjax

219 天前

HTMLButtonElement 为什么不继承 HTMLElement ？

ChrisFreeMan

219 天前

@Opportunity 学到了👍长见识了。验证了可以通过编译。

ChrisFreeMan

219 天前

@sapjax 这是 web components 有一些情况子类需要调用元素自身的方法，这只是其中一个例子，比如还有 HTMLDialogElement, HTMLCanvasElement

echo0x000001

219 天前

这种情况要么再基于 HTMLElement 开发一个 themeWather 基类，两个子类继承这个基类。要么使用 mixin 实现多重继承，参考这个库 https://www.npmjs.com/package/ts-mixer

ChrisFreeMan

219 天前

@echo0x000001 暂时先不拆了，先不过度的设计，不然东西做不完。我的品味还没到那里就不强迫自己了。