michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Updating docs for automatic detection of export interface Props (#1945)

Browse source 
Co-authored-by: Tony Sullivan <tony.sullivan@hyperlab.se>
This commit is contained in:
Tony Sullivan 2021-11-20 17:53:31 +01:00 committed by GitHub
parent b8fb80dd2c
commit 72f6d192ce
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
docs/src/pages/core-concepts/astro-components.md
View file

@ -167,17 +167,20 @@ const { greeting = 'Hello', name } = Astro.props;
</div> </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 ```astro
--- ---
// include any `import` and `export` statements first
// Example: <SomeComponent /> (WARNING: "name" prop is required) // Example: <SomeComponent /> (WARNING: "name" prop is required)
export interface Props { export interface Props {
name: string; name: string;
greeting?: 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; const { greeting = 'Hello', name } = Astro.props;
--- ---
<div> <div>