From 72f6d192ced5a40cae1761a826115c7740933ded Mon Sep 17 00:00:00 2001 From: Tony Sullivan Date: Sat, 20 Nov 2021 17:53:31 +0100 Subject: [PATCH] Updating docs for automatic detection of `export interface Props` (#1945) Co-authored-by: Tony Sullivan --- docs/src/pages/core-concepts/astro-components.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/core-concepts/astro-components.md b/docs/src/pages/core-concepts/astro-components.md index 1f1ae9a4a..84715de7d 100644 --- a/docs/src/pages/core-concepts/astro-components.md +++ b/docs/src/pages/core-concepts/astro-components.md @@ -167,17 +167,20 @@ const { greeting = 'Hello', name } = Astro.props; ``` -You can define your props with TypeScript by exporting a `Props` type interface. +You can define your props with TypeScript by exporting a `Props` type interface. Astro will automatically pick up any exported `Props` interface and give type warnings/errors for your project. -> _**In the future**_, Astro will automatically pick up any exported `Props` interface and give type warnings/errors for your project. +Make sure to keep all `import` and `export` statements at the top of the component, before any other JavaScript or TypeScript logic! ```astro --- +// include any `import` and `export` statements first // Example: (WARNING: "name" prop is required) export interface Props { name: string; greeting?: string; } + +// with `import`s and `export`s out of the way, include the rest of the component logic here const { greeting = 'Hello', name } = Astro.props; ---