zo2o女人另类zo2o洗浴,69久久夜色精品国产69

TypeScript技巧：擴展HTML元素屬性

首頁

web前端

js教程

在打字稿中擴展HTML元素的屬性

Jack chen

Feb 08, 2025 am 11:09 AM

TypeScript技巧：擴展HTML元素屬性

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

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

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

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

讓我們創(chuàng)建一個具有應用內樣式的自定義按鈕組件。在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';
};

現在，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元素的功能，提高代碼的可維護性和可重用性。

Extending the Properties of an HTML Element in TypeScript

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

以上是在打字稿中擴展HTML元素的屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發(fā)現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1794

CakePHP 教程

1740

Laravel 教程

1590

PHP教程

1468

NYT迷你填字遊戲答案

267

587

Related knowledge

為什麼要將標籤放在的底部？ Jul 02, 2025 am 01:22 AM

PlacingtagsatthebottomofablogpostorwebpageservespracticalpurposesforSEO,userexperience,anddesign.1.IthelpswithSEObyallowingsearchenginestoaccesskeyword-relevanttagswithoutclutteringthemaincontent.2.Itimprovesuserexperiencebykeepingthefocusonthearticl

如何在JS中與日期和時間合作？ Jul 01, 2025 am 01:27 AM

JavaScript中的日期和時間處理需注意以下幾點：1.創(chuàng)建Date對像有多種方式，推薦使用ISO格式字符串以保證兼容性；2.獲取和設置時間信息可用get和set方法，注意月份從0開始；3.手動格式化日期需拼接字符串，也可使用第三方庫；4.處理時區(qū)問題建議使用支持時區(qū)的庫，如Luxon。掌握這些要點能有效避免常見錯誤。

什麼是在DOM中冒泡和捕獲的事件？ Jul 02, 2025 am 01:19 AM

事件捕獲和冒泡是DOM中事件傳播的兩個階段，捕獲是從頂層向下到目標元素，冒泡是從目標元素向上傳播到頂層。 1.事件捕獲通過addEventListener的useCapture參數設為true實現；2.事件冒泡是默認行為，useCapture設為false或省略；3.可使用event.stopPropagation()阻止事件傳播；4.冒泡支持事件委託，提高動態(tài)內容處理效率；5.捕獲可用於提前攔截事件，如日誌記錄或錯誤處理。了解這兩個階段有助於精確控制JavaScript響應用戶操作的時機和方式。

如何在node.js中提出HTTP請求？ Jul 13, 2025 am 02:18 AM

在Node.js中發(fā)起HTTP請求有三種常用方式：使用內置模塊、axios和node-fetch。 1.使用內置的http/https模塊無需依賴，適合基礎場景，但需手動處理數據拼接和錯誤監(jiān)聽，例如用https.get()獲取數據或通過.write()發(fā)送POST請求；2.axios是基於Promise的第三方庫，語法簡潔且功能強大，支持async/await、自動JSON轉換、攔截器等，推薦用於簡化異步請求操作；3.node-fetch提供類似瀏覽器fetch的風格，基於Promise且語法簡單

垃圾收集如何在JavaScript中起作用？ Jul 04, 2025 am 12:42 AM

JavaScript的垃圾回收機制通過標記-清除算法自動管理內存，以減少內存洩漏風險。引擎從根對像出發(fā)遍歷並標記活躍對象，未被標記的則被視為垃圾並被清除。例如，當對像不再被引用（如將變量設為null），它將在下一輪迴收中被釋放。常見的內存洩漏原因包括：①未清除的定時器或事件監(jiān)聽器；②閉包中對外部變量的引用；③全局變量持續(xù)持有大量數據。 V8引擎通過分代回收、增量標記、並行/並發(fā)回收等策略優(yōu)化回收效率，降低主線程阻塞時間。開發(fā)時應避免不必要的全局引用、及時解除對象關聯，以提升性能與穩(wěn)定性。

JavaScript模塊上的確定JS綜述：ES模塊與COMPORJS Jul 02, 2025 am 01:28 AM

ES模塊和CommonJS的主要區(qū)別在於加載方式和使用場景。 1.CommonJS是同步加載，適用於Node.js服務器端環(huán)境；2.ES模塊是異步加載，適用於瀏覽器等網絡環(huán)境；3.語法上，ES模塊使用import/export，且必須位於頂層作用域，而CommonJS使用require/module.exports，可在運行時動態(tài)調用；4.CommonJS廣泛用於舊版Node.js及依賴它的庫如Express，ES模塊則適用於現代前端框架和Node.jsv14 ；5.雖然可混合使用，但容易引發(fā)問題

var vs Let vs const：快速JS綜述解釋器 Jul 02, 2025 am 01:18 AM

var、let和const的區(qū)別在於作用域、提升和重複聲明。 1.var是函數作用域，存在變量提升，允許重複聲明；2.let是塊級作用域，存在暫時性死區(qū)，不允許重複聲明；3.const也是塊級作用域，必須立即賦值，不可重新賦值，但可修改引用類型的內部值。優(yōu)先使用const，需改變變量時用let，避免使用var。