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

V2EX = way to explore

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

已注册用户请登录

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

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

export abstract classDivComponentsManager 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()) } }

TypeScript

抽象类

继承

10 条回复 2024-04-16 15:10:27 +08:00

ChrisFreeMan

2024 年 4 月 16 日

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

2024 年 4 月 16 日

你确定能这么写？

ChrisFreeMan

2024 年 4 月 16 日

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

Opportunity

2024 年 4 月 16 日

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

2024 年 4 月 16 日 via Android

mixin

sapjax

2024 年 4 月 16 日

HTMLButtonElement 为什么不继承 HTMLElement ？

ChrisFreeMan

2024 年 4 月 16 日

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

ChrisFreeMan

2024 年 4 月 16 日

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

echo0x000001

2024 年 4 月 16 日

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

ChrisFreeMan

2024 年 4 月 16 日

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