ホームページ >ウェブフロントエンド >jsチュートリアル >TypeScriptの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
もう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 サイトの他の関連記事を参照してください。