diff options
| -rw-r--r-- | docs/src/pages/core-concepts/astro-components.md | 7 |
1 files 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; </div> ``` -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: <SomeComponent /> (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; --- <div> |