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

TypeScript

ts 生态有没有开源的简单的 kv 配置管理项目 - V2EX 你们是怎么学习 typescript 的？ - V2EX 用 Go 移植的 TypeScript 7 要来了 - V2EX TypeScript5.9，仿佛走出草原来到了现代社会 - V2EX Typescript 有没有能对接 AI 的知识库或者文档？能处理稍微复杂点的类型 - V2EX typescript 如何返回一个动态对象类型 - V2EX ts 有没有直接能查看最终类型的方法 - V2EX TypeScript Native 预览版发布了 - V2EX 关于 TypeScript 装饰器和接口的问题，请教一下各位 - V2EX 你们 typescript 用自带枚举还是字符串枚举，感觉字符串枚举类型用起来有点不可靠啊 - V2EX effect-ts - V2EX typescript 达人乱入 - V2EX TypeScript 宣布原生移植计划，性能将提升 10 倍？ - V2EX #笔记#更好的 ts 重载声明方法 - V2EX 使用 satisfies 实现穷举类型保护 - V2EX 请教一个 TS 问题，不知能否实现 - V2EX 装饰器能不能装饰类的所有方法 - V2EX TypeSciprt 类型推断，如何进一步收窄类型？ - V2EX TypeScript 项目打包发布到 npm，如何给方法和接口添加 dts TypeScript 类型推导真强大。 - V2EX 为啥下面这段代码 TS 不报错 - V2EX ts 类型约束+请求参数校验+自动生成 openapi/swagger 文档，这三者目前有整合为一体的最佳实践吗 - V2EX TypeScript 能不能别这么古怪，这行为什么会报错呢？ - V2EX 怎么每次碰到想不通的代码行都出在 TypeScript😢 这行到底哪里有问题？ - V2EX 低估了 typescript 的难度 - V2EX 前端写 nestjs 后端，用 TypeORM 时感到非常困惑，不知道是不是我的理解有问题 - V2EX 我列举了市面上最好的几个 TypeScript 教程，想深入学习 TypeScript 的同学以后不用走弯路了 - V2EX 这样的函数类型定义在 ts 里面叫什么？ - V2EX typescript 如何忽略泛型参数啊？ - V2EX TypeScript 现在的应用场景 - V2EX ==TypeScript 写的 npm 包可以用 javascript 使用包的函数吗 - V2EX react 如何优雅的实现批量删除+二次确认 - V2EX TypeScript 怎么 wrap 一个函数并修改一下返回值？ - V2EX vscode 纯 js 项目有类型推断和成员变量提示，但是如果 ts 混用的话， js 导入就全变成 any 了，请问有办法解决吗这个项目这样定义 Typescript 类型和使用，学到了，有几个问题？ - V2EX 请教一个 Typescript 的问题 - V2EX 这种的类型是不是实现不了(TypeScript) - V2EX 问题一个 typescript 类型包裹问题 - V2EX 遇到了极其诡异的不符合进入 if 条件的要求但是还是进入了 - V2EX typescript 的类型处理 - V2EX 想问问大家 TypeScript 中关于 null 处理的方式 - V2EX 有没有声明 typescript 类型的好办法以及前端样式的健壮性问题 - V2EX typescript 类型断言问题 - V2EX TypeScript 中类型编程简介 - V2EX [求助] 类型 { K:V } --> { "type": K , "conf": V } 且约束 - V2EX 大佬们， vscode 开发 ts，这个地方的提示，怎么修改成中文啊 - V2EX TypeScript 中「类型定义的命名空间」使用 - V2EX 有没有办法把 ts 的 error 报错改成 warning - V2EX [求助] 函数中使用泛型缩小参数类型 - V2EX

ChrisFreeMan · 2024-04-16 · via TypeScript

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

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

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())
  }
}

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 日

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) {
}

sapjax 2024 年 4 月 16 日

HTMLButtonElement 为什么不继承 HTMLElement ？

ChrisFreeMan 2024 年 4 月 16 日

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

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。原文来自 — 版权归原作者所有。

推荐订阅源

TypeScript