TypeScript技巧：擴展HTML元素屬性

本文節(jié)選自《釋放TypeScript的威力》，將向您展示如何在TypeScript中擴展HTML元素的屬性。在大型應用中，我們經(jīng)常構建基于標準HTML元素的組件，例如自定義按鈕，或組合標簽和輸入字段的組件。

TypeScript要求顯式定義組件接受的屬性，這對于每個屬性來說都可能很繁瑣。為了匹配React中HTML元素使用的屬性，可以使用React.ComponentProps。要排除某些屬性，可以使用Omit實用程序類型。

要擴展組件的屬性，可以使用交集類型。這允許組件接受HTML元素的所有屬性以及其他附加屬性。這對于根據(jù)當前主題更改樣式的組件或向標準HTML元素添加新功能非常有用。

方法一：擴展單個HTML元素的屬性

讓我們創(chuàng)建一個具有應用內(nèi)樣式的自定義按鈕組件。在JavaScript中，我們可以這樣做：

const Button = (props) => {
  return <button {...props} />;
};

在TypeScript中，我們可以添加必要的屬性，例如children：

const Button = ({ children }: React.PropsWithChildren) => {
  return <button>{children}</button>;
};

但這很繁瑣。我們可以使用React.ComponentProps來匹配HTML button元素的屬性：

const Button = (props: React.ComponentProps<'button'>) => {
  return <button {...props} />;
};

但如果用戶傳遞className屬性，它會覆蓋我們的樣式。我們可以使用Omit排除特定屬性：

type ButtonProps = Omit<React.ComponentProps<'button'>, 'className'>;

const Button = (props: ButtonProps) => {
  return <button {...props} />;
};

或者，我們可以使用clsx庫來管理類名：

import React from 'react';
import clsx from 'clsx';

type ButtonProps = React.ComponentProps<'button'>;

const Button = ({ className, ...props }: ButtonProps) => {
  return <button className={clsx('button', className)} {...props} />;
};

要擴展屬性，可以使用交集類型：

type ButtonProps = React.ComponentProps<'button'> & {
  variant?: 'primary' | 'secondary';
};

現(xiàn)在，Button組件接受button元素的所有屬性，以及額外的variant屬性。

方法二：創(chuàng)建組合組件

另一個常見的組件是組合標簽和輸入元素的組件：

type LabeledInputProps = React.ComponentProps<'input'> & {
  label: string;
};

const LabeledInput = ({ id, label, ...props }: LabeledInputProps) => {
  return (
    <>
      <label htmlFor={id}>{label}</label>
      <input id={id} {...props} />
    </>
  );
};

這樣，我們就可以輕松地復用和擴展標準HTML元素的功能，提高代碼的可維護性和可重用性。

本文節(jié)選自《釋放TypeScript的威力》，更多內(nèi)容請訪問SitePoint Premium或電子書零售商。

以上是在打字稿中擴展HTML元素的屬性的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！