diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md index 8971696ec..6ab4e54b9 100644 --- a/content/en/guide/v10/typescript.md +++ b/content/en/guide/v10/typescript.md @@ -216,9 +216,9 @@ When we write components like `` that wrap the HTML ``, most of the props that can be used on the native HTML input element. To do this we can do the following: ```tsx -import { JSX } from 'preact'; +import { HTMLInputAttributes } from 'preact'; -interface InputProperties extends JSX.InputHTMLAttributes { +interface InputProperties extends InputHTMLAttributes { mySpecialProp: any; } @@ -232,10 +232,10 @@ Now when we use `Input` it will know about properties like `value`, ... Preact emits regular DOM events. As long as your TypeScript project includes the `dom` library (set it in `tsconfig.json`), you have access to all event types that are available in your current configuration. ```tsx -import type { JSX } from "preact"; +import type { TargetedMouseEvent } from "preact"; export class Button extends Component { - handleClick(event: JSX.TargetedMouseEvent) { + handleClick(event: TargetedMouseEvent) { alert(event.currentTarget.tagName); // Alerts BUTTON } @@ -522,9 +522,9 @@ The only annotation needed is in the reducer function itself. The `useReducer` t ## Extending built-in JSX types -You may have [custom elements](/guide/v10/web-components) that you'd like to use in JSX, or you may wish to add additional attributes to all HTML elements to work with a particular library. To do this, you will need to extend the `IntrinsicElements` or `HTMLAttributes` interfaces, respectively, so that TypeScript is aware and can provide correct type information. +You may have [custom elements](/guide/v10/web-components) that you'd like to use in JSX, or you may wish to add additional attributes to all or some HTML elements to work with a particular library. To do this, you will need to use "Module augmentation" to extend and/or alter the types that Preact provides. -### Extending `IntrinsicElements` +### Extending `IntrinsicElements` for custom elements ```tsx function MyComponent() { @@ -549,7 +549,9 @@ declare global { export {}; ``` -### Extending `HTMLAttributes` +### Extending `HTMLAttributes` for global custom attributes + +If you want to add a custom attribute to all HTML elements, you can extend the `HTMLAttributes` interface: ```tsx function MyComponent() { @@ -574,3 +576,22 @@ declare global { // This empty export is important! It tells TS to treat this as a module export {}; ``` + +### Extending per-element interfaces for custom attributes + +Sometimes you may not want to add a custom attribute globally, but only to a specific element. In this case, you can extend the specific element's interface: + +```tsx +// global.d.ts + +declare global { + namespace preact.JSX { + interface HeadingHTMLAttributes { + custom?: string | undefined; + } + } +} + +// This empty export is important! It tells TS to treat this as a module +export {}; +``` diff --git a/content/en/guide/v11/typescript.md b/content/en/guide/v11/typescript.md index ea807bfb6..8bd832744 100644 --- a/content/en/guide/v11/typescript.md +++ b/content/en/guide/v11/typescript.md @@ -315,8 +315,8 @@ function App() { return ( { Когда мы пишем компоненты, такие как ``, которые оборачивают HTML-элемент ``, чаще всего мы хотим унаследовать свойства, которые могут быть использованы на нативном HTML-элементе input. Для этого мы можем сделать следующее: ```tsx -import { JSX } from 'preact'; +import { InputHTMLAttributes } from 'preact'; -interface InputProperties extends JSX.InputHTMLAttributes { +interface InputProperties extends InputHTMLAttributes { mySpecialProp: any } @@ -226,10 +226,10 @@ const Input = (props: InputProperties) => Preact генерирует регулярные события DOM. Пока ваш проект TypeScript включает библиотеку `dom` (установите её в `tsconfig.json`), у вас есть доступ ко всем типам событий, которые доступны в вашей текущей конфигурации. ```tsx -import type { JSX } from "preact"; +import type { TargetedMouseEvent } from "preact"; export class Button extends Component { - handleClick(event: JSX.TargetedMouseEvent) { + handleClick(event: TargetedMouseEvent) { alert(event.currentTarget.tagName); // Оповещение BUTTON } @@ -563,4 +563,4 @@ declare global { // Этот пустой экспорт очень важен! Это говорит TS, что нужно рассматривать это как модуль export {} -``` \ No newline at end of file +``` diff --git a/content/zh/guide/v10/typescript.md b/content/zh/guide/v10/typescript.md index 5ed8b7fd8..05962df7f 100644 --- a/content/zh/guide/v10/typescript.md +++ b/content/zh/guide/v10/typescript.md @@ -214,9 +214,9 @@ class Expandable extends Component { 当我们编写像 `` 这样包装 HTML `` 的组件时,大多数情况下我们希望继承可以在原生 HTML input 元素上使用的 props。为此,我们可以这样做: ```tsx -import { JSX } from 'preact'; +import { InputHTMLAttributes } from 'preact'; -interface InputProperties extends JSX.InputHTMLAttributes { +interface InputProperties extends InputHTMLAttributes { mySpecialProp: any } @@ -230,10 +230,10 @@ const Input = (props: InputProperties) => Preact 会发出常规的 DOM 事件。只要您的 TypeScript 项目包含 `dom` 库(在 `tsconfig.json` 中设置),您就可以访问当前配置中可用的所有事件类型。 ```tsx -import type { JSX } from "preact"; +import type { TargetedMouseEvent } from "preact"; export class Button extends Component { - handleClick(event: JSX.TargetedMouseEvent) { + handleClick(event: TargetedMouseEvent) { alert(event.currentTarget.tagName); // 提示 BUTTON } @@ -568,4 +568,4 @@ declare global { // 这个空导出很重要!它告诉 TS 将此视为模块 export {} -``` \ No newline at end of file +```