From 0ba0980d5995b9b63d425acd75a1ab9c38f1718e Mon Sep 17 00:00:00 2001 From: delucis Date: Fri, 15 Jul 2022 11:10:33 +0200 Subject: [PATCH 1/3] =?UTF-8?q?Document=20use=20of=20Astro=E2=80=99s=20JSX?= =?UTF-8?q?=20types?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Closes #984 --- src/pages/en/guides/typescript.md | 29 ++++++++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/src/pages/en/guides/typescript.md b/src/pages/en/guides/typescript.md index 4d11808b1a95e..3e0f14d6f88f1 100644 --- a/src/pages/en/guides/typescript.md +++ b/src/pages/en/guides/typescript.md @@ -78,11 +78,38 @@ export interface Props { name: string; greeting?: string; } -const { greeting = 'Hello', name } = Astro.props as Props +const { greeting = 'Hello', name } = Astro.props as Props; ---

{greeting}, {name}!

``` +### Built-in attribute types + +Astro provides JSX type definitions to check your markup is using valid HTML attributes. You can use these types to help build component props. For example, if you were building a `` component, you could do the following to mirror the default HTML attributes in your component’s prop types. + +```astro +--- +export type Props = astroHTML.JSX.HTMLAttributes; +const { href, ...attrs } = Astro.props as Props; +--- + + + +``` + +It is also possible to extend the default JSX definitions to add non-standard attributes by redeclaring the `astroHTML.JSX` namespace in a `.d.ts` file. + +```ts +// src/custom-attributes.d.ts + +declare namespace astroHTML.JSX { + interface HTMLAttributes { + 'data-count'?: number; + 'data-label'?: string; + } +} +``` + ## Type checking To see type errors in your editor, please make sure that you have the [Astro VS Code extension](/en/editor-setup/) installed. Please note that the `astro start` and `astro build` commands will transpile the code with esbuild, but will not run any type checking. To prevent your code from building if it contains TypeScript errors, change your "build" script in `package.json` to the following: From 7257fb24085ea8715a36a069d7321ce7d01018ca Mon Sep 17 00:00:00 2001 From: Chris Swithinbank Date: Fri, 15 Jul 2022 13:13:56 +0200 Subject: [PATCH 2/3] Use new element-specific interface Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com> --- src/pages/en/guides/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/en/guides/typescript.md b/src/pages/en/guides/typescript.md index 3e0f14d6f88f1..0daf1b416a63f 100644 --- a/src/pages/en/guides/typescript.md +++ b/src/pages/en/guides/typescript.md @@ -89,7 +89,7 @@ Astro provides JSX type definitions to check your markup is using valid HTML att ```astro --- -export type Props = astroHTML.JSX.HTMLAttributes; +export type Props = astroHTML.JSX.AnchorHTMLAttributes; const { href, ...attrs } = Astro.props as Props; --- From 99fa11aa85168b7b3d7f1d3e842a2fc81bf7cb60 Mon Sep 17 00:00:00 2001 From: delucis Date: Fri, 15 Jul 2022 13:35:41 +0200 Subject: [PATCH 3/3] Add note about `astroHTML` in `.ts` files --- src/pages/en/guides/typescript.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/pages/en/guides/typescript.md b/src/pages/en/guides/typescript.md index 0daf1b416a63f..b51c7ae0716d1 100644 --- a/src/pages/en/guides/typescript.md +++ b/src/pages/en/guides/typescript.md @@ -110,6 +110,16 @@ declare namespace astroHTML.JSX { } ``` +:::note +`astroHTML` is injected globally inside `.astro` components. To use it in TypeScript files, use a [triple-slash directive](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html): + +```ts +/// + +type MyAttributes = astroHTML.JSX.ImgHTMLAttributes; +``` +::: + ## Type checking To see type errors in your editor, please make sure that you have the [Astro VS Code extension](/en/editor-setup/) installed. Please note that the `astro start` and `astro build` commands will transpile the code with esbuild, but will not run any type checking. To prevent your code from building if it contains TypeScript errors, change your "build" script in `package.json` to the following: