TypeScriptのHTML要素のプロパティを拡張します

タイプスクリプトのヒント：html要素プロパティを拡張

この記事は、「TypeScriptのパワーのリリース」から抜粋されています。これにより、TypeScriptのHTML要素のプロパティを拡張する方法が示されます。大規模なアプリケーションでは、多くの場合、カスタムボタンやタグと入力フィールドを組み合わせたコンポーネントなどの標準のHTML要素に基づいてコンポーネントを構築します。

TypeScriptには、コンポーネントによって受け入れられたプロパティの明示的な定義が必要です。これは、各プロパティで面倒です。 ReactでHTML要素で使用される属性と一致するには、React.ComponentPropsを使用できます。特定のプロパティを除外するには、Omitユーティリティタイプを使用できます。

コンポーネントのプロパティを拡張するには、交差点タイプを使用できます。これにより、コンポーネントはHTML要素のすべての属性と他の追加属性を受け入れることができます。これは、現在のテーマに基づいてスタイルを変更したり、標準のHTML要素に新機能を追加するコンポーネントに役立ちます。

メソッド1：単一のHTML要素のプロパティを拡張

アプリ内スタイルのカスタムボタンコンポーネントを作成しましょう。 javascriptでは、これを行うことができます：

<code class="language-javascript">const Button = (props) => {
  return <button></button>;
};</code>

TypeScriptでは、children：

などの必要なプロパティを追加できます。

<code class="language-typescript">const Button = ({ children }: React.PropsWithChildren) => {
  return <button>{children}</button>;
};</code>

しかし、これは非常に面倒です。 React.ComponentPropsを使用して、html button要素の属性を一致させることができます：

<code class="language-typescript">const Button = (props: React.ComponentProps<'button'>) => {
  return <button></button>;
};</code>

しかし、ユーザーがclassNameプロパティを渡すと、スタイルを上書きします。特定の属性を除外するには、Omitを使用できます

<code class="language-typescript">type ButtonProps = Omit<react.componentprops>, 'className'>;

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

または、クラス名を管理するために

ライブラリを使用できます：clsx

<code class="language-typescript">import React from 'react';
import clsx from 'clsx';

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

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

属性を拡張するには、交差点タイプを使用できます。

<code class="language-typescript">type ButtonProps = React.ComponentProps<'button'> & {
  variant?: 'primary' | 'secondary';
};</code>

コンポーネントは、

要素のすべての属性と追加のButton属性を受け入れるようになりました。 button variant

メソッド2：複合コンポーネントを作成

もう1つの一般的なコンポーネントは、ラベルと入力要素を組み合わせたコンポーネントです。

この方法で、標準のHTML要素の機能を簡単に再利用および拡張し、コードの保守性と再利用性を改善することができます。

<code class="language-typescript">type LabeledInputProps = React.ComponentProps<'input'> & {
  label: string;
};

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

この記事は、「TypeScriptのパワーのリリース」から抜粋しています。

以上がTypeScriptのHTML要素のプロパティを拡張しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。