各种框架中的Typescript和HTML属性

如果您曾在 JavaScript 框架（React、Vue、Solid 或 Svelte）中使用过 Typescript，那么您可能需要/将需要创建包含原生 HTML 元素的包装器/镜像组件。

例如：在 ` ` 元素上增强 `` 包装器。或者自定义 ``` 组件的行为类似于 ``——并且能够接受所有相关属性，如`type`、`style`、`aria-`等——而且还允许传递您自己的自定义`variant`属性。

在这种情况下，您需要使用 Typescript 编写组件的 props 来**扩展**底层 HTML 组件接受的属性列表。

幸运的是，所有框架都提供了类型助手来实现这一点。

反应

React 提供了多个辅助函数，包括 `ComponentProps`，或者更具体的 `ComponentPropsWithoutRef`（如果你不想接受 `ref` 属性）。它们都需要一个类型参数，即对应于 HTML 元素的字符串。

interface ButtonProps extends React.ComponentPropsWithoutRef<"button"> {
  specialProp?: string;
}

export function Button(props: ButtonProps) {
  const {specialProp, ...rest} = props;
  return {Button Text}
}

坚硬的

Solid 通过其 `JSX.ComponentProps` 类型提供了类似的帮助器

import { JSX, splitProps } from "solidjs"

interface ButtonProps extends JSX.ComponentProps<'button'> {
  specialProp?: string;
}

export function Button(props: ButtonProps) {
  const [local, others] = splitProps(props, ['specialProp']);
  return {Button Text}
}

苗条

Svelte 采用了略有不同的方法，你可以从“svelte/elements”导入直接接口，而无需使用类型参数

Button Text

Vue

Vue 具有自动“fallthrough”属性，因此任何未明确定义的 prop 都将自动通过模板中的根元素传递。无需 Typescript 参与！