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
+```