在 TypeScript 中扩展 HTML 元素的属性

MrRishuRR

在我参与过的大多数大型应用程序和项目中，我经常发现自己构建了一堆组件，这些组件实际上是标准 HTML 元素之上的超集或抽象。一些示例包括自定义按钮元素，这些元素可能采用一个 prop 来定义该按钮是否应该是主按钮或辅助按钮，或者可能指示它将调用危险操作，例如从数据库中删除或删除项目。除了我想添加的道具之外，我仍然希望我的按钮具有按钮的所有属性。 另一个常见的情况是，我最终将创建一个允许我同时定义标签和输入字段的组件。我不想重新添加元素所<input />具有的所有属性。我希望我的自定义组件的行为就像输入字段一样，但也采用一个字符串作为标签，并自动连接htmlFor上的 prop<label />以与id上的相对应<input />


。 在 JavaScript 中，我可以将{...props}任何 props 传递给底层 HTML 元素。这在 TypeScript 中可能  WhatsApp 号码列表  有点棘手，我需要显式定义组件将接受哪些 props。虽然对组件接受的确切类型进行细粒度控制很好，但必须手动为每个属性添加类型信息可能很乏味。 在某些情况下，我需要一个可适应的组件，例如<div>，它可以根据当前主题更改样式。例如，也许我想根据用户是否手动启用 UI 的浅色或深色模式来定义应使用哪些样式。我不想为每个块元素（例如<section>、<article>、<aside>等）重新定义此组件。它应该能够表示不同语义的 HTML 元素，并且 TypeScript 自动调整以适应这些变化。 我们可以采用以下几种策略： Learn to Code with JavaScript 对于仅对一种元素创建抽象的组件，我们可以扩展该元素的属性。 对于想要定义不同元素的组件，我们可以创建多态组件。多态组件是设计为呈现为不同的 HTML 元素或组件，同时保持相同的属性和行为的组件。它允许我们指定一个 prop 来确定其渲染的元素类型。




多态组件提供了灵活性和可重用性，而无需我们重新实现组件。举个具体的例子，你可以看看Radix 的多态组件的实现。 在本教程中，我们将了解第一个策略。 镜像和扩展 HTML 元素的属性 让我们从简介中提到的第一个示例开始。我们想要创建一个带有适当样式的按钮，以便在我们的应用程序中使用。在 JavaScript 中，我们也许可以做这样的事情： const Button = (props) => { return <button className="button" {...props} />; }; 在 TypeScript 中，我们只需添加我们知道需要的内容即可。tton className="button" {...props} />; }; 但我们有一个新问题。或者更确切地说，我们遇到了JavaScript 示例中也存在的问题，但我们忽略了它。如果有人使用我们的新Button组件传递一个classNameprop，它将覆盖我们的className. 我们可以（并且我们将会）添加一些代码来处理这个问题，但我不想错过向您展示如何ops} />; }; 现在，TypeScript 将阻止我们或其他任何人将className属性传递到我们的Button组件中。如果我们只想使用传入的内容扩展类列表，我们可以通过几种不同的方式来实现。