你能在TypeScript中扩展HTMLDivElement吗？
在TypeScript中扩展HTMLDivElement是可行的，这通常通过创建一个继承自HTMLDivElement的新类来实现。以下是实现这一功能的步骤和示例代码：
基础概念
在面向对象编程中，继承是一种允许一个类（称为子类或派生类）继承另一个类（称为父类或基类）的属性和方法的机制。在TypeScript中，你可以使用extends关键字来实现继承。
类型定义
首先，你需要扩展HTMLDivElement接口以添加自定义属性和方法。这可以通过声明一个新的接口并继承HTMLDivElement来完成。
interface ICustomDiv extends HTMLDivElement {
customProperty: string;
customMethod(): void;
}创建新类
接下来，创建一个新类并实现ICustomDiv接口。
class CustomDiv extends HTMLDivElement implements ICustomDiv {
customProperty: string;
constructor() {
super(); // 必须首先调用父类的构造函数
this.customProperty = "Hello, world!";
}
customMethod(): void {
console.log(this.customProperty);
}
}注册自定义元素
为了让浏览器识别并使用你的自定义元素，你需要注册它。
customElements.define('custom-div', CustomDiv, { extends: 'div' });应用场景
这种技术可以用于创建具有特定行为和属性的自定义HTML元素。例如，你可能想要创建一个可以自动更新时间戳的<timestamp-div>元素，或者一个可以响应用户交互并显示动态内容的<interactive-div>元素。
遇到的问题及解决方法
问题：自定义元素未被浏览器识别
原因：可能是由于浏览器兼容性问题或者自定义元素的注册不正确。
解决方法：
- 确保你的浏览器支持自定义元素API。
- 检查
customElements.define调用是否正确，包括元素名称和构造函数。
问题：类型错误或编译失败
原因：可能是由于类型定义不正确或者继承链中存在问题。
解决方法：
- 确保你的接口和类定义正确无误。
- 使用TypeScript的编译器选项来获取更详细的错误信息。
示例代码
// 定义自定义接口
interface ICustomDiv extends HTMLDivElement {
customProperty: string;
customMethod(): void;
}
// 创建新类
class CustomDiv extends HTMLDivElement implements ICustomDiv {
customProperty: string;
constructor() {
super();
this.customProperty = "Hello, world!";
}
customMethod(): void {
console.log(this.customProperty);
}
}
// 注册自定义元素
customElements.define('custom-div', CustomDiv, { extends: 'div' });
// 使用自定义元素
const div = document.createElement('div') as ICustomDiv;
document.body.appendChild(div);
(div as CustomDiv).customMethod(); // 输出: Hello, world!参考链接
请注意，自定义元素API是一个相对较新的Web标准，因此在较旧的浏览器中可能不受支持。在使用之前，请确保检查目标浏览器的兼容性。
相关·内容
我是第一次做一个基于DOM的游戏。我想扩展HTMLDivElement，但是在TypeScript中，HTMLDivElement是一个接口。 我想做这个伪类： class QuizElement extends HTMLDivElement{
} 如果这个问题太疯狂了，我很抱歉。我对DOM有些陌生，我只是想，我可以在任何其他环境中扩展任何可视类，所以我猜它在这里是可行的！
浏览 193提问于2014-07-18得票数 13
回答已采纳
使用Svelte3.49、TypeScript和Bootstra5.2，我为Modal对话框设置了一个事件处理程序(运行良好)：
<div on:shown.bs.modal={() => focusField.focus()} class="modal fade" id="announcementModal" aria-labelledby="announcementModalTitle">
...but我在上面的代码中收到了关于"on“的TypeScript警告.
(property) onshown: true
T
浏览 7提问于2022-07-20得票数 0
我正在尝试在TypeScript中实例化新的HTMLDivElement
var elem = new HTMLDivElement();
但是浏览器抛出
Uncaught TypeError: Illegal constructor.
解决方法似乎是使用
var elem = document.createElement('div');
但由于各种原因，我发现这并不是最优的。
当lib.d.ts中存在用于in的new关键字时，为什么不能直接实例化DOM元素
declare var HTMLDivElement: {
prototype: HTMLDivElement;
浏览 250提问于2014-10-07得票数 69
回答已采纳
使用foo作为属性引发错误：
// App.tsx
// throws
const App = () => <div foo></div>
export default App
Type '{ foo: true; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
Property 'foo' does
浏览 4提问于2021-05-24得票数 16
回答已采纳
我正在使用react-beautiful dnd进行拖放场景，尝试添加一个拖放动画，遵循手册https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/drop-animation.md。 在使用typescript时，当我将isDragging属性添加到简单的div元素中时，我遇到了麻烦。为了解决这个问题，我构建了一个具有扩展属性的组件，如下所示 Specify specific props and accept general HTML props in Typescript React App 这在某
浏览 68提问于2019-10-11得票数 0
我在webpack中使用了typescript和react-bootstrap，但当我在react-bootstrap中使用组件时，它显示错误消息如下：
ERROR in [at-loader] ./node_modules/react-bootstrap/esm/NavbarCollapse.d.ts:4:18
TS2320: Interface 'NavbarCollapseProps' cannot simultaneously extend types 'Pick<CollapseProps, "className" |
浏览 2提问于2021-05-27得票数 2
2回答
useRef(null)和useRef(undefined) (或者仅仅是useRef())有什么不同？
在TypeScript中，结果以不同的类型结束：
const undefinedRef: React.MutableRefObject<undefined> = useRef(undefined)
conse noArgRef: React.MutableRefObject<undefined> = useRef()
const nullRef: React.MutableRefObject<null> = useRef(null)
当将ref传递给另
浏览 4提问于2020-05-06得票数 6
1回答
我正在将我的React项目转换为TypeScript，但我想不出如何扩展React.HTMLPorps以接受自定义的CSS数据属性。
我在项目中使用的一个常见模式是：
const MyComponent = ( ) => <div mycustomattr="true"/>;
我尝试过创建这样的界面：
interface ExtendedDiv extends HTMLProps<HTMLDivElement> {
mycutomattr: "true" | "false";
};
但是，我不知道如何将其应用
浏览 3提问于2022-11-08得票数 0
回答已采纳
我知道可以将整个属性注释为不推荐的，但是否可以在字符串联合中注释一个(或多个)单独的值(不推荐)？
例如，给定此类型声明：
export type BoxProps = HTMLAttributes<HTMLDivElement> & {
/**
* @deprecated rounded has no effect and will be removed in a future version
*/
rounded?: boolean;
variant?:
| 'neutral'
| 'grey'
浏览 10提问于2022-02-10得票数 2
我正在尝试在React上创建一个模态，并使用TypeScript。我得到了一个“节点类型的参数”的错误，并且不能弄清楚这是什么(也不能随后修复我的问题)。
const Modal = ({ children }: { children: any }) => {
const elRef = useRef<HTMLDivElement | null>(null); //tried adding'| Node'
if (!elRef.current) {
const div = document.createElement("div"
浏览 0提问于2020-04-25得票数 0
我想用Typescript在React中定义类，它有一个带html输出的方法。但是得到关于函数的输出类型的错误。 interface StateProps {
page: string,
}
class App extends React.Component<StateProps,any> {
render() {
return (
<div className="App">
{this.pageContent(this.props.page)}
</div>
);
}
pageC
浏览 7提问于2019-05-01得票数 2
回答已采纳
我试着在UseEffect中使用UseEffect，它运行得很好，但是TypeScript在抱怨cachedRef。它说:类型为'HTMLDivElement \ null‘的参数不能分配给'Element’类型的参数。
，但不知道如何将它应用到我的代码中。如果可能的话。
const StickyNav = ({ children, stuckClasses, unstuckClasses }: Props) => {
const [stuck, setStuck] = useState(false)
const ref = useRef<HTMLDivEl
浏览 8提问于2022-02-24得票数 2
1回答
在角分量中，我想按id或class获取div元素。
这工作
menuDisplayDiv = document.getElementsByClassName("some_class")[0] as HTMLDivElement;
menuDisplayDiv = document.getElementById("some_Id") as HTMLDivElement;
menuDisplayDiv = document.getElementsByClassName("some_class")[0] as HTMLDElement;
menu
浏览 4提问于2020-09-23得票数 0
回答已采纳
我刚开始使用Typescript，不知道如何输入这种情况。我正在编写一个自定义钩子，并试图创建一个回调引用。我的问题是这个函数设置了ref的current，并且不返回任何东西，但是由于我将它用作ref，typescript对我大喊Property 'current' is missing in type '(node: any) => void' but required in type 'RefObject<HTMLDivElement>'。 提前谢谢你。 代码如下： import React, {useCallback,
浏览 51提问于2020-06-13得票数 2
回答已采纳
我正在使用带有Typescript和Material UI的React。我想传一个裁判作为道具。在WidgetDialog中，我有 export interface WidgetDialogProps {
....
ref?: React.RefObject<HTMLDivElement>;
}
....
<div data-id={dataId} className={classes.dialog} ref={ref}>
--- dialog content ---
</div> 当我想在其他组件中使用
浏览 81提问于2020-04-14得票数 0
回答已采纳
在Typescript环境中使用StyledComponent的withComponent()方法时，我遇到了麻烦。我有一个简单的样式组件，我想将其应用于React组件。但是Typescript编译器抱怨道具不匹配。
我应该如何使用withComponent()方法来获得一个样式化的组件，它也有我的react组件的道具？
import React from 'react';
import styled from 'styled-components';
const RedBackground = styled.div`
background-color
浏览 92提问于2018-06-01得票数 0
我想要创建一个组件，它根据赋予它的属性呈现一个特定的HTML元素。在本例中，如果组件的div属性为true，则呈现isDiv，如果为false，则呈现button。
我还希望能够向组件提供元素的任何属性，这些属性将传递到元素本身。
如果没有TypeScript，我可能编写如下所示的组件：
const Button = ({ isDiv, elementProps, children }) => {
return isDiv ? (
<div {...elementProps} className="button">{children}&
浏览 3提问于2021-04-04得票数 0
回答已采纳
我的react组件只需要一个回调ref。我使用useState作为回调引用。 const [refElement, setReference] = useState(null); 在渲染内部： <div
// this ref is throwing ts error
ref={setArrowElement}
style={styles.arrow}
id="arrow"
/> Typescript错误:在tsc上 - error TS2322: Type 'Dispatch<SetStateAction<null>
浏览 13提问于2020-08-07得票数 1
我正在使用新的useRef挂钩创建一个引用 const anchorEl = React.useRef<HTMLDivElement>(null) 和使用like <div style={{ width: "15%", ...flexer, justifyContent: "flex-end" }}>
<Popover
id="simple-popper"
open={open}
anchorEl={anchorEl}
onClose={()
浏览 31提问于2019-01-29得票数 35
回答已采纳
1回答
我正在使用创建一个虚拟列表。默认情况下，React将其列表呈现为带有<div>元素的<div>。我希望使用<ul>元素呈现一个<li>，并添加如下样式：
const Item = React.forwardRef<HTMLLIElement, { children: React.ReactNode }>(
(props, ref) => {
return (
<li className="border-r border-neutral-20" {...props} ref={ref}
浏览 17提问于2022-10-13得票数 0
回答已采纳
1回答
我的环境
TypeScript ReactJS
当我试图使用name作为属性时所收到的错误。
类型'{ name: string；"data-id"：string；"data- Type "：string；}‘不能分配到键入'DetailedHTMLProps<HTMLAttributes，HTMLDivElement>’。属性'name‘在'DetailedHTMLProps<HTMLAttributes，HTMLDivElement>’类型中不存在
我的当前代码正在抛出错误：
<div name
浏览 6提问于2022-05-15得票数 0
我正在尝试在forwardRef中使用defaultProps。当我在不使用forwardRef的情况下使用MessageBox时，它可以很好地与defaultProps配合使用。但是，当我对它使用forwardRef时，出现了一个错误。如何解决？ typescript：3.4.5 "react"："^16.8.6"， import React, { forwardRef } from "react";
export interface MessageBoxProps {
test: string;
children: any;
}
浏览 44提问于2020-06-23得票数 4
我想有条件地将onClick函数添加到我的TypeScript React组件中，如下所示：
<div onClick={(!disabled && onClick) ?? undefined}>{children}</div>
但我知道这个错误：
Type 'false | (() => void) | undefined' is not assignable to type 'MouseEventHandler<HTMLDivElement> | undefined'.
Type 'boo
浏览 4提问于2022-06-23得票数 1
回答已采纳
是否有可能将React ref提供给文档范围.selectNodeContents()函数。我最终得到的错误是： Argument of type 'HTMLDivElement | null' is not assignable to parameter of type 'Node'.
Type 'null' is not assignable to type 'Node'.ts(2345)
(property) React.RefObject<HTMLDivElement>.current: HTMLDivE
浏览 47提问于2021-09-02得票数 0
回答已采纳
TypeScript error in D:/office-work/ma-web/src/@utils/uiUtils.ts(6,8):
属性'classList‘在’GlobalEventHandler‘类型中不存在。TS2339
4 | ) as HTMLDivElement
5 | toggleElem.onclick = function () {
6\x{e 010}this.classList.toggle(“活动”)\x{e76f}}\x{e76f}}
码
export const uiEventHandler = () =>
浏览 9提问于2020-10-27得票数 2
我已经使用yarn add react-cool-inview安装了react-cool-inview。 然后，我将其导入并在组件(MyComponent.tsx)上使用它 import React from "react";
import useInView from "react-cool-inview";
const MyComponent = (): JSX.Element => {
interface onEnterArgs {
unobserve: () => void;
}
const { ref } = us
浏览 128提问于2021-03-02得票数 0
回答已采纳
我在typescript中为ref定义类型时遇到问题。 我有questionsRef，这是一个参考列表。 const questionsRef = useRef<Array<HTMLDivElement | null>>([]); 我想把这个questionsRef传递给实用函数，但是Typescript需要正确的参数类型。 如何定义questiosnRef:在这里输入？ const focusNextQuestion = (questionsRef: any, nextQuestion: any) => {
if (questionsRef.curre
浏览 6提问于2021-10-07得票数 0
回答已采纳
1回答
我试着将typescript与样式化组件一起使用。我有一个div，里面有一个input组件。 import styled from 'styled-components';
const Input = () => {
return (<div>testing</div>);
};
const Main = styled.div`
display: flex;
height: 100%;
& > ${Input} {
display: none;
}
`; 但是它在控制台上抛出了这个错误。 ? 错
浏览 21提问于2020-03-16得票数 1
回答已采纳
为了编写我的第一个TypeScript项目，编译器非常挑剔：
let test = <div style={{textAlign:'right'}}>Text</div>; // OK
let right = 'right';
let test2 = <div style={{textAlign:right}}>Text</div>; /***ERROR***
Type '{ style: { textAlign: string; }; }' is not assignable to
浏览 0提问于2018-04-27得票数 1
回答已采纳
所以我有一个简单的React组件，并想用GreenSock ScrollTrigger插件来给它添加动画效果。不幸的是，在这个项目中，我使用的是Typescript，类型不匹配。代码：
import React, {useRef, useEffect} from "react";
import gsap from 'gsap'
import ScrollTrigger from 'gsap/ScrollTrigger'
import styled from "styled-components";
export default
浏览 4提问于2020-11-18得票数 0
当尝试创建一个状态包含HTMLDivElement类型的键(或任何其他HTMLElement派生的键)的reducer时，我得到了似乎是该HTMLElement的所有键的Argument of type '...' is not assignable to parameter of type。 interface ITestEvent {
name: string;
id: string;
ref: HTMLDivElement;
}
interface AddEventPayload {
event: ITestEvent;
}
interface Te
浏览 9提问于2020-08-20得票数 0
回答已采纳
1回答
我用node.js和typescript为后端编程。 我也为typescript安装了'mysql‘模块和'@types/mysql’模块。 正如你所知道的，mysql module基本上不支持promise模式。 当我使用javascript而不是typescript时，这段代码工作得很好。 const pool = mysql.createPool(config);
pool.query = util.promisify(pool.query);
export default pool; 但是，typescript中pool.query和util.promisify()
浏览 14提问于2019-04-26得票数 0
在我的一个React组件中，我对一些自定义元素有以下定义：
declare global {
// eslint-disable-next-line @typescript-eslint/no-namespace
namespace JSX {
interface IntrinsicElements {
'd3fc-group': DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
'd
浏览 5提问于2022-06-11得票数 6
回答已采纳
大家都知道，在一个普通的下拉列表中，你可以用onChange={e => this.setState({ whatever: e.target.value })}来改变它的值。问题是，在流畅的UI React中，这是不起作用的，因为它有一个自定义的值处理系统。在Fluent UI文档中，它说要将onChange函数链接到： const onChange = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void => {
setSelectedItem(item);
};
浏览 38提问于2020-07-28得票数 0
回答已采纳
根据这些来自react- hotkeys -hook包(https://react-hotkeys-hook.vercel.app/docs/documentation/useHotkeys/scoping-hotkeys)的文档，我尝试将一些热键的注册范围限定到一个特定的React组件。但是，这个包的'useHotkeys‘钩子返回的ref对象在我试图通过它的ref属性传递给时会导致TypeScript错误。(当我没有将热键的范围限定到特定的组件时，我可以让热键工作，但是这个错误阻止了代码的构建。 我的钩子代码： import { useHotkeys, Options } fro
浏览 137提问于2021-10-11得票数 2
我正在用TypeScript (2.4.2)第一次涉足React (15.6.1)，并且我正在尝试创建一个表示可拖动的JSON字段的组件。下面是我的组件代码：
import * as React from "react";
interface JsonFieldProps {
name: string;
type: string;
indent: number;
}
export class JsonField extends React.Component<JsonFieldProps, undefined> {
marginS
浏览 0提问于2017-09-06得票数 10
回答已采纳
HTML：
<li class="nav-item">
<a
class="nav-link"
routerLinkActive="active"
routerLink="about"
(mouseenter)="onLinkHover($event)"
>About</a
>
</li>
TypeScript：
onLinkHover(e: a
浏览 0提问于2021-08-06得票数 0
我有一个名为“Webpack”、“Typescript”和“React Hooks”的项目，在这个项目中我使用CSS- in -js将样式传递给div。当我将鼠标悬停在Menu组件中的style属性上时，我得到了以下错误。我不确定应该在哪里绑定CSSProperties。
(JSX attribute) React.HTMLAttributes<HTMLDivElement>.style?: React.CSSProperties
Type '{ display: string; margin: number; padding: number; alignItems: st
浏览 3提问于2021-03-01得票数 2
我正在学习TypeScript的反应，这是相当令人沮丧和挑剔，但我坚持它。目前，我正在为我的内联onClick收到一条打字稿信息，并且不确定如何处理它。
type MenuProps = {
openMenu: Function;
toggle: string;
slidein: string;
};
...
const Menu: FunctionComponent<MenuProps> = ({ openMenu, toggle, slidein }) => {
...
<div className={`menu ${toggle}`} onClic
浏览 1提问于2019-09-30得票数 0
回答已采纳
1回答
在Typescript中，如何为对象的所有属性使用getter/setter？例如，我可以使用以下代码：
class Div {
private _container: HTMLDivElement;
public get container() {
return this._container;
}
public set container(value) {
alert("Updated!");
this._container = value;
}
testDiv() {
浏览 2提问于2013-01-15得票数 1
回答已采纳
1回答
如何将对象提供给具有样式的组件以实现简单性。这样，我可以访问我所有属性的主题，重要的是不必使用-，并且可以提供int而不是所有内容都是字符串。 const Div = styled.div(() => ({
padding: 20,
border: '1px solid #c6d4df',
boxSizing: 'border-box'
})) 错误 TypeScript error in /var/www/property-estimating/frontend/claim-handler/src/components/Overview/i
浏览 25提问于2021-06-17得票数 1
回答已采纳
在TSX中使用JSX示例代码时，出现了以下错误。
(property) use:sortable: true
Type '{ children: any; "use:sortable": true; class: string; classList: { "opacity-25": boolean; "transition-transform": boolean; }; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
浏览 3提问于2022-09-22得票数 0
回答已采纳
我正在做一个React Typescript项目。下面是该项目的一个非常简化的版本。我在这里尝试使用更传统的多态性，在组件树中呈现从普通Typescript对象(而不是React组件)返回的组件。我想这样做的原因是，我可以拥有在运行时更改的多态类，并管理它们自己的状态和业务逻辑。 import React, { useEffect } from "react";
class ClickCounter {
private count: number;
constructor() {
this.count = 0;
}
IncrementCount()
浏览 40提问于2021-09-08得票数 1
作为React的新手，我遇到了以下问题:我以这种方式创建了一个组件：
export const CSpiderWeb = (props: iSpiderWebProps) => {
const classes = useStyles();
const [drawingObject, setDrawingObject] = useState({} as iDrawingObject);
const _InitRaphael = (target : HTMLDivElement) => {
while (target.firstChild) {
浏览 18提问于2019-10-28得票数 0
回答已采纳
我有一个使用组件的功能组件。在示例页面上，他们使用基于类的组件和来处理日期选择：
...
handleDayClick(day, { selected }) {
}
...
<DayPicker
onDayClick={this.handleDayClick}
/>
在我的功能组件中，我这样做了：
const handleDayClick = (day, { selected }) => {
...
}
...
<DayPicker
o
浏览 6提问于2021-12-07得票数 0
TLDR:在类型记录中是否有一种方法可以声明包含扩展给定接口的所有类型的类型？
我的具体问题
我正在编写一个自定义的React钩子，该钩子封装了用于决定是否对某个元素进行访问的逻辑。它大致以为模型。它公开了一个应该能够接受任何HTMLElement的引用：
const ref = useRef<HTMLElement>(null);
问题是，如果我试图在任何特定的React元素上使用这个ref，我会得到一个错误，告诉我这个特定的元素并不完全是HTMLElement。例如，如果我将它与HTMLDivElement一起使用，就会得到以下错误：argument of type HTMLE
浏览 0提问于2019-07-25得票数 8
回答已采纳
12回答
我正尝试在我的泛型类中创建一个类型参数的新对象。在我的类View中，我有两个泛型类型的对象列表作为类型参数传递，但当我尝试创建new TGridView()时，TypeScript说：
找不到符号'TGridView
代码如下：
module AppFW {
// Represents a view
export class View<TFormView extends FormView, TGridView extends GridView> {
// The list of forms
public Forms: {
浏览 165提问于2013-06-30得票数 171
回答已采纳
1回答
请用我在这里说的任何话纠正我(实际问题在代码下面)。
我已经快速地建立了一个项目的原型(ASP.NET Core2.1)，并且还没有发现有必要用Webpack/Parcel/Rollup/Browserify来构造它，就像它使用每个视图进行简单的JavaScript验证一样(我确实用Gulp来缩小文件)。
因为我没有将我的文件封装到模块中，所以它们都向全局范围开放(坏主意，对吗？)因此，我决定通过运行JavaScript变量中的所有内容来“命名空间”它们。
我拥有的代码如下所示：
const formValidation = {
submitBtn : null as unknown as
浏览 0提问于2018-10-31得票数 2
我在以下位置使用了情感风格： import styled from '@emotion/styled' 我正在尝试将道具传递给一个带样式的组件，就像指南提到的： https://emotion.sh/docs/styled 由于某种原因，它不能工作。我也使用TypeScript。我在这里将道具传递给名为StyleWrapper的样式化组件： const ex: React.FunctionComponent<exProps> = props => {
return (
<StyleWrapper someNumber = {props.so
浏览 4提问于2019-04-17得票数 9
回答已采纳
我正在用React + TypeScript编写我的第一个应用程序，我似乎无法自己解决一些问题。
我有很多错误，但我不明白为什么。这是信息
Type '{ ref: MutableRefObject<any>; letter: string; onSelectFunction: { onSelectAnswer: (event: SyntheticEvent<HTMLDivElement, Event>) => void; }; }' is not assignable to type 'Content'.
Types of p
浏览 1提问于2021-10-18得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
