ホームページ >ウェブフロントエンド >jsチュートリアル >TypeScriptのHTML要素のプロパティを拡張します

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

尊渡假赌尊渡假赌尊渡假赌
尊渡假赌尊渡假赌尊渡假赌オリジナル
2025-02-08 11:09:09415ブラウズ

タイプスクリプトのヒント: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のパワーのリリース」から抜粋しています。 Extending the Properties of an HTML Element in TypeScript

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。