diff --git a/src/content/docs/es/basics/astro-components.mdx b/src/content/docs/es/basics/astro-components.mdx index d76f6052a153e..8168bb4164ea5 100644 --- a/src/content/docs/es/basics/astro-components.mdx +++ b/src/content/docs/es/basics/astro-components.mdx @@ -3,6 +3,7 @@ title: Componentes description: Una introducción a los componentes de Astro. i18nReady: true --- + import ReadMore from '~/components/ReadMore.astro'; **Los componentes de Astro** son los elementos básicos de cualquier proyecto de Astro. Son componentes de plantillas HTML sin tiempo de ejecución del lado del cliente y utilizan la extensión de archivo `.astro`. @@ -13,7 +14,7 @@ Si sabes HTML, ya sabes lo suficiente para escribir tu primer componente de Astr Más información en la [referencia sintáctica de Astro](/es/reference/astro-syntax/). ::: -Los componentes de Astro son extremadamente flexibles. Un componente de Astro puede ser tan pequeño como un fragmento de HTML, como una colección de etiquetas comunes `` que facilitan el trabajo con SEO. Los componentes pueden ser elementos de interfaz de usuario reutilizables, como una cabecera o una tarjeta de perfil. Los componentes de Astro pueden incluso contener un diseño de página completo o, cuando se encuentran en la carpeta especial `src/pages/`, ser una página completa. +Los componentes Astro son extremadamente flexibles. Un componente de Astro puede ser tan pequeño como un fragmento de HTML, como una colección de etiquetas comunes `` que facilitan el trabajo con SEO. Los componentes pueden ser elementos de interfaz de usuario reutilizables, como una cabecera o una tarjeta de perfil. Los componentes de Astro pueden incluso contener un diseño de página completo o, cuando se encuentran en la carpeta especial `src/pages/`, ser una página completa. Lo más importante que hay que saber sobre los componentes de Astro es que **no se renderizan en el cliente**. Se renderizan en HTML en el momento de la compilación o bajo demanda. Puedes incluir código JavaScript dentro del frontmatter de tu componente, y todo será eliminado de la página final enviada a los navegadores de tus usuarios. El resultado es un sitio más rápido, sin ninguna huella de JavaScript añadida por defecto. @@ -50,7 +51,7 @@ import UnComponenteAstro from '../components/UnComponenteAstro.astro'; import UnComponenteReact from '../components/UnComponenteReact.jsx'; import algunosDatos from '../data/pokemon.json'; -// Acceder a props recibidas, por ejemplo `` +// Acceder a propiedades recibidas, por ejemplo `` const { title } = Astro.props; // Consultar datos externos, de una API privada o base de datos @@ -89,7 +90,7 @@ const { title } = Astro.props;

¡Hola mundo!

- +

{title}

@@ -124,22 +125,22 @@ import Button from './Button.astro'; ``` -## Props de componentes +## Propiedades de componente -Un componente de Astro puede definir y aceptar props. Estas props estarán disponibles para ser utilizadas en el renderizado del maquetado HTML y además estarán disponibles en el script del componente de manera global dentro del objeto `Astro.props`. +Un componente Astro puede definir y aceptar propiedades. Estas propiedades estarán disponibles para ser utilizadas en el renderizado del maquetado HTML y además estarán disponibles en el script del componente de manera global dentro del objeto `Astro.props`. -Aquí vemos un ejemplo de un componente que recibe una prop `saludo` y otra `nombre`. Fíjate que las props a recibir están desestructuradas del objeto global `Astro.props`. +Aquí vemos un ejemplo de un componente que recibe una propiedad `saludo` y otra `nombre`. Fíjate que las propiedades a recibir están desestructuradas del objeto global `Astro.props`. ```astro "Astro.props" --- // src/components/GreetingHeadline.astro -// Utilización: +// Uso: const { saludo, nombre } = Astro.props ---

{saludo}, {nombre}!

``` -Este componente, cuando se importa y renderiza en otros componentes, layouts o páginas de Astro, puede pasar estas props como atributos: +Este componente, cuando se importa y renderiza en otros componentes, layouts o páginas de Astro, puede pasar estas propiedades como atributos: ```astro /(\w+)=\S+/ --- @@ -152,7 +153,7 @@ const name = 'Astro';

¡Espero que tenga un día maravilloso!

``` -También puedes definir props con TypeScript usando una interfaz de tipo `Props`. Astro recogerá automáticamente la interfaz `Props` en el frontmatter y dará advertencias/errores de tipo para tu proyecto. A estas propiedades también se les puede dar valores predeterminados cuando se desestructuran desde `Astro.props`. +También puedes definir propiedades con TypeScript usando una interfaz de tipo `Props`. Astro recogerá automáticamente la interfaz `Props` en el frontmatter y dará advertencias/errores de tipo para tu proyecto. A estas propiedades también se les puede dar valores predeterminados cuando se desestructuran desde `Astro.props`. ```astro ins={3-6} --- @@ -167,7 +168,7 @@ const { saludo = "Hola", nombre } = Astro.props;

{saludo}, {nombre}!

``` -A los props de componentes se les pueden dar valores predeterminados para usar cuando no se proporciona ninguno. +A las propiedades de componentes se les pueden dar valores predeterminados para usar cuando no se proporciona ninguno. ```astro ins="= \"Hola\"" ins="= \"Astronauta\"" --- diff --git a/src/content/docs/es/basics/layouts.mdx b/src/content/docs/es/basics/layouts.mdx index b7e25a4edc8cb..97255fac3574a 100644 --- a/src/content/docs/es/basics/layouts.mdx +++ b/src/content/docs/es/basics/layouts.mdx @@ -3,15 +3,16 @@ title: Plantillas description: Una introducción a las plantillas de Astro. i18nReady: true --- -import ReadMore from '~/components/ReadMore.astro' -**Las plantillas** son [componentes de Astro](/es/basics/astro-components/) para proporcionar una estructura reutilizable, como una plantilla de página. +import ReadMore from '~/components/ReadMore.astro'; + +**Las plantillas** son [componentes Astro](/es/basics/astro-components/) para proporcionar una estructura reutilizable, como una plantilla de página. Convencionalmente usamos el término "plantilla" para proporcional elementos compartidos en la interfaz del usuario por medio de páginas, como encabezados, barras de navegación y pies de página. Una plantilla proporciona a [Astro, Markdown o páginas MDX](/es/basics/astro-pages/) con: - una **página shell** (con estiquetas ``, `` y ``) - un [**``**](/es/basics/astro-components/#slots) para especificar dónde colocar el contenido de la página. -Pero, ¡no hay nada especial acerca de los componentes plantilla! Pueden [aceptar props](/es/basics/astro-components/#props-de-componentes) e [importar y usar otros componentes](/es/basics/astro-components/#estructura-de-un-componente) como cualquier otro componente de Astro. Pueden incluir [componentes de framework](/es/guides/framework-components/) y [scripts de lado del cliente](/es/guides/client-side-scripts/). Ni siquiera tienen que proporcionar un plantilla entera, en su lugar se pueden utilizar como plantillas parciales. +Pero, ¡no hay nada especial acerca de los componentes plantilla! Pueden [aceptar propiedades](/es/basics/astro-components/#propiedades-de-componente) e [importar y usar otros componentes](/es/basics/astro-components/#estructura-de-un-componente) como cualquier otro componente de Astro. Pueden incluir [componentes de framework](/es/guides/framework-components/) y [scripts de lado del cliente](/es/guides/client-side-scripts/). Ni siquiera tienen que proporcionar un plantilla entera, en su lugar se pueden utilizar como plantillas parciales. Sin embargo, si un componente de plantilla contiene una página shell, su elemento `` debe ser el padre de todos los demás elementos en el componente. @@ -65,7 +66,7 @@ import MySiteLayout from '../layouts/MySiteLayout.astro'; ## Usando TypeScript con plantillas -Cualquier plantilla de Astro puede ser modificada para introducir seguridad de tipos y autocompletado proporcionando los tipos en las props: +Cualquier plantilla de Astro puede ser modificada para introducir seguridad de tipos y autocompletado proporcionando los tipos en las propiedades: ```astro ins={2-7} title="src/components/MyLayout.astro" --- @@ -106,12 +107,12 @@ Esto no se reconoce como una propiedad especial cuando se utiliza [colecciones d ```markdown title="src/pages/page.md" {2} --- -layout: ../layouts/BlogPostLayout.astro -title: "¡Hola, mundo!" -author: "Matthew Phillips" -date: "09 Aug 2022" +layout: '../layouts/BlogPostLayout.astro' +title: '¡Hola, mundo!' +author: 'Matthew Phillips' +date: '09 Aug 2022' --- -Todas las propiedades frontmatter están disponibles como props en un componente plantilla de Astro. +Todas las propiedades frontmatter están disponibles como propiedades en un componente plantilla de Astro. La propiedad `layout` es la única especial proporcionada por Astro. @@ -144,7 +145,7 @@ const { frontmatter } = Astro.props; ``` -Puedes establecer el tipo de una plantilla como [`Props`](/es/guides/typescript/#component-props) con el ayudante `MarkdownLayoutProps`: +Puedes establecer el tipo de una plantilla como [`Props`](/es/guides/typescript/#propiedades-de-componente) con el ayudante `MarkdownLayoutProps`: ```astro title="src/layouts/BlogPostLayout.astro" ins={2,4-9} --- @@ -175,12 +176,12 @@ const { frontmatter, url } = Astro.props; ``` -### Props de plantillas Markdown +### Propiedades de plantillas Markdown Una plantilla Markdown/MDX tendrá acceso a la siguiente información a través de `Astro.props`: -- **`file`** - La ruta absoluta de este archivo (por ejemplo, `/home/user/projects/.../file.md`). -- **`url`** - La URL de la página (por ejemplo, `/en/guides/markdown-content`). +- **`file`** - La ruta absoluta de este archivo (p. ej., `/home/user/projects/.../file.md`). +- **`url`** - La URL de la página (p. ej., `/en/guides/markdown-content`). - **`frontmatter`** - Todo el frontmatter del documento Markdown o MDX. - **`frontmatter.file`** - La misma que la propiedad de nivel superior `file`. - **`frontmatter.url`** - La misma que la propiedad de nivel superior `url`. @@ -199,7 +200,7 @@ Una plantilla Markdown tendrá acceso a todas sus [propiedades exportadas](/es/g ### Importando Plantillas Manualmente (MDX) -También puedes utilizar la propiedad especial Markdown layout en el frontmatter de los archivos MDX para pasar los props `frontmatter` y `headings` directamente a un componente layout especificado del mismo modo. +También puedes utilizar la propiedad especial Markdown layout en el frontmatter de los archivos MDX para pasar las propiedades `frontmatter` y `headings` directamente a un componente layout especificado del mismo modo. Para pasar información a tu plantilla MDX que no existe (o no puede existir) en su frontmatter, puede importar y utilizar un componente ``. Funciona como cualquier otro componente de Astro, y no recibirá ningún prop automáticamente. Pásale directamente los accesorios que necesites: @@ -212,7 +213,7 @@ publishDate: '21 de Septiembre de 2022' import BaseLayout from '../../layouts/BaseLayout.astro'; export function fancyJsHelper() { - return "¡Intenta hacer eso con YAML!"; + return '¡Intenta hacer eso con YAML!'; } diff --git a/src/content/docs/es/guides/configuring-astro.mdx b/src/content/docs/es/guides/configuring-astro.mdx new file mode 100644 index 0000000000000..1383fb18c8949 --- /dev/null +++ b/src/content/docs/es/guides/configuring-astro.mdx @@ -0,0 +1,123 @@ +--- +title: Resumen de la configuración +description: Descubre las diferentes formas en las que puedes configurar y personalizar tu nuevo proyecto y tu experiencia de desarrollo. +i18nReady: true +--- + +import ReadMore from '~/components/ReadMore.astro'; + +Astro es un framework flexible y neutral que te permite configurar tu proyecto de muchas formas diferentes. Esto significa que empezar con un nuevo proyecto puede resultar abrumador: ¡no hay una "única manera correcta" de configurar tu proyecto de Astro! + +Las guías en la sección de "Configuración" te ayudarán a familiarizarte con los distintos archivos que te permiten configurar y personalizar diversos aspectos de tu proyecto y de tu entorno de desarrollo. + +Si este es tu primer proyecto con Astro, o si hace tiempo que no configuras un proyecto nuevo, consulta las siguientes guías y la documentación de referencia para obtener ayuda. + +## El archivo de configuración de Astro + +El [archivo de configuración de Astro](/es/reference/configuration-reference/) es un archivo JavaScript que se incluye en el directorio raíz de cada proyecto inicial: + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + // tus opciones de configuración aquí... +}); +``` + +Solo es necesario si tienes algo que configurar, pero la mayoría de los proyectos usarán este archivo. La función auxiliar `defineConfig()` proporciona IntelliSense automático en tu IDE y es donde añadirás todas tus opciones de configuración para indicar a Astro cómo compilar y generar tu proyecto en HTML. + +Recomendamos utilizar el formato de archivo predeterminado `.mjs` en la mayoría de los casos, o `.ts` si deseas escribir TypeScript en tu archivo de configuración. No obstante, el formato `astro.config.js` es compatible. + +Consulta la [referencia de configuración](/es/reference/configuration-reference/) de Astro para obtener una descripción completa de todas las opciones de configuración disponibles. + +## El archivo de configuración de TypeScript + +Todos los proyectos iniciales de Astro incluyen un archivo `tsconfig.json` en el proyecto. El [script de un componente](/es/basics/astro-components/#script-de-un-componente) Astro está escrito en TypeScript, lo que proporciona las herramientas de edición de Astro y te permite, si lo deseas, añadir sintaxis a tu código JavaScript para la comprobación de tipos del código de tu propio proyecto. + +Usa el archivo `tsconfig.json` para configurar la plantilla de TypeScript que realizará la comprobación de tipos en tu código, configurar los plugins de TypeScript, establecer alias de importación y mucho más. + +Lee la [guía de TypeScript](/es/guides/typescript/) de Astro para obtener una visión general completa de las opciones de TypeScript y los tipos de utilidad integrados en Astro. + +## Experiencia en desarrollo + +Mientras trabajas en modo de desarrollo, puedes aprovechar tu editor de código y otras herramientas para mejorar la experiencia de desarrollo con Astro. + +Astro ofrece su propia extensión oficial para VS Code y es compatible con otras herramientas de edición muy populares. Astro también ofrece una barra de herramientas personalizable que se muestra en la vista previa del navegador mientras el servidor de desarrollo está en funcionamiento. Puedes instalar e incluso crear tus propias aplicaciones para la barra de herramientas con el fin de añadir funcionalidades adicionales. + +Lee las guías de Astro sobre [opciones de configuración del editor](/es/editor-setup/) y [cómo utilizar la barra de herramientas de desarrollo](/es/guides/dev-toolbar/) para aprender a personalizar tu experiencia de desarrollo. + +## Tareas habituales en los nuevos proyectos + +A continuación te indicamos algunos primeros pasos que podrías dar al iniciar un nuevo proyecto de Astro. + +### Agrega tu dominio de despliegue + +Para generar el mapa del sitio y crear URL canónicas, configura la URL de despliegue en la opción [`site`](/es/reference/configuration-reference/#site). Si vas a realizar el despliegue en una ruta (p. ej., `www.example.com/docs`), también puedes configurar una [`base`](/es/reference/configuration-reference/#base) para la raíz de tu proyecto. + +Además, los distintos servidores de despliegue pueden comportarse de forma diferente en lo que respecta a las barras al final de las URL (p. ej., `example.com/about` frente a `example.com/about/`). Una vez desplegado el sitio, es posible que tengas que configurar la opción [`trailingSlash`](/es/reference/configuration-reference/#trailingslash). + +```js title="astro.config.mjs" +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + site: 'https://www.example.com', + base: '/docs', + trailingSlash: 'always', +}); +``` + +### Agregar metadatos del sitio + +Astro no usa su archivo de configuración para datos comunes de SEO o metadatos, sino únicamente para la información necesaria para compilar el código de tu proyecto y convertirlo a HTML. + +En su lugar, esta información se agrega al `` de tu página usando las etiquetas HTML estándar `` y ``, igual que si estuvieras escribiendo páginas HTML convencionales. + +Una práctica habitual en los sitios web Astro es crear un [componente `.astro`](/es/basics/astro-components/) `` que se pueda añadir a una [plantilla](/es/basics/layouts/) común, de modo que se aplique a todas tus páginas. + +```astro title="src/components/MainLayout.astro" +--- +import Head from './Head.astro'; + +const { ...props } = Astro.props; +--- + + + + + + + + + + +``` + +Dado que `Head.astro` es simplemente un componente Astro normal, puedes importar archivos y recibir propiedades que te pasen otros componentes, como el título de una página concreta. + +```astro title="src/components/Head.astro" +--- +import Favicon from '../assets/Favicon.astro'; +import SomeOtherTags from './SomeOtherTags.astro'; + +const { title = 'Mi página Astro', ...props } = Astro.props; +--- + +{title} + + + + + + + + + + + + + + + + +``` diff --git a/src/content/docs/es/guides/typescript.mdx b/src/content/docs/es/guides/typescript.mdx new file mode 100644 index 0000000000000..19148051d1309 --- /dev/null +++ b/src/content/docs/es/guides/typescript.mdx @@ -0,0 +1,381 @@ +--- +title: TypeScript +description: Aprende cómo usar la compatibilidad integrada de Astro con TypeScript. +i18nReady: true +--- + +import Since from '~/components/Since.astro'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; + +Astro incluye compatibilidad integrada con [TypeScript](https://www.typescriptlang.org/). Puedes importar archivos `.ts` y `.tsx` en tu proyecto Astro, escribir código en TypeScript directamente dentro de tu [componente Astro](/es/basics/astro-components/#script-de-un-componente) e incluso usar un archivo [`astro.config.ts`](/es/guides/configuring-astro/#el-archivo-de-configuración-de-astro) para la configuración de Astro si lo prefieres. + +Al usar TypeScript, puedes evitar errores en tiempo de ejecución definiendo los tipos de los objetos y componentes en tu código. Por ejemplo, si usas TypeScript para [especificar los tipos de las propiedades de tu componente](#propiedades-de-componente), aparecerá un error en tu editor si asignas un prop que tu componente no admite. + +No necesitas escribir código en TypeScript en tus proyectos Astro para beneficiarte de sus ventajas. Astro siempre trata el código de tus componentes como si fuera TypeScript, y la [extensión de Astro para VS Code](/es/editor-setup/) deducirá todo lo que pueda para ofrecerte autocompletado, sugerencias y avisos de errores en tu editor. + +El servidor de desarrollo de Astro no realiza ningún tipo de comprobación de tipos, pero puedes usar un [script independiente](#verificación-de-tipos) para detectar errores de tipos desde la línea de comandos. + +## Configuración + +Los proyectos iniciales de Astro incluyen un archivo `tsconfig.json` en tu proyecto. Aunque no escribas código en TypeScript, este archivo es importante para que herramientas como Astro y VS Code sepan cómo interpretar tu proyecto. Algunas funciones (como la importación de paquetes de npm) no son totalmente compatibles con el editor si no se dispone de un archivo `tsconfig.json`. Si instalas Astro manualmente, asegúrate de crear este archivo tú mismo. + +### Plantillas de TSConfig + +Astro incluye tres plantillas extensibles de `tsconfig.json`: `base`, `strict` y `strictest`. La plantilla `base` permite el uso de las características modernas de JavaScript y también se usa como base para las demás plantillas. Recomendamos usar `strict` o `strictest` si tienes pensado escribir en TypeScript en tu proyecto. Puedes consultar y comparar las configuraciones de las tres plantillas en [astro/tsconfigs/](https://github.com/withastro/astro/blob/main/packages/astro/tsconfigs/). + +Para heredar de una de las plantillas, usa [la opción `extends`](https://www.typescriptlang.org/tsconfig#extends): + +```json title="tsconfig.json" +{ + "extends": "astro/tsconfigs/base" +} +``` + +Además, recomendamos configurar `include` y `exclude` de la siguiente manera para aprovechar los tipos de Astro y evitar la revisión de los archivos compilados: + +```json title="tsconfig.json" ins={3-4} +{ + "extends": "astro/tsconfigs/base", + "include": [".astro/types.d.ts", "**/*"], + "exclude": ["dist"] +} +``` + +### Plugin de TypeScript para editores + +El [plugin de Astro para TypeScript](https://www.npmjs.com/package/@astrojs/ts-plugin) se puede instalar por separado si no usas la [extensión oficial de Astro para VS Code](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). La extensión de VS Code instala y configura automáticamente este plugin, por lo que no es necesario instalar ambos. + +Este plugin solo funciona en el editor. Al ejecutar `tsc` en la terminal, los archivos `.astro` se ignoran por completo. En su lugar, puedes usar [el comando de la CLI `astro check`](/es/reference/cli-reference/#astro-check) para comprobar tanto los archivos `.astro` como los `.ts`. + +Este plugin también soporta la importación de archivos `.astro` a partir de archivos `.ts` (lo cual puede resultar útil para volver a exportarlos). + + + + ```shell + npm install @astrojs/ts-plugin + ``` + + + ```shell + pnpm add @astrojs/ts-plugin + ``` + + + ```shell + yarn add @astrojs/ts-plugin + ``` + + + +A continuación, añade lo siguiente a tu archivo `tsconfig.json`: + +```json title="tsconfig.json" +{ + "compilerOptions": { + "plugins": [ + { + "name": "@astrojs/ts-plugin" + }, + ], + } +} +``` + +Para comprobar que el plugin funciona, crea un archivo `.ts` e importa un componente Astro en él. No deberías recibir ningún mensaje de advertencia del editor. + +### Frameworks de UI + +Si tu proyecto usa una [framework de UI](/es/guides/framework-components/), es posible que se necesiten ajustes adicionales en función del framework. Consulta la documentación de TypeScript de tu framework para obtener más información. ([Vue](https://vuejs.org/guide/typescript/overview.html#using-vue-with-typescript), [React](https://react-typescript-cheatsheet.netlify.app/docs/basic/setup), [Preact](https://preactjs.com/guide/v10/typescript), [Solid](https://www.solidjs.com/guides/typescript), [Svelte](https://svelte.dev/docs/svelte/typescript)) + +## Importaciones de tipos + +Usa importaciones de tipos explícitas y exportaciones siempre que sea posible. + +```js del={1} ins={2} ins="type" +import { SomeType } from './script'; +import type { SomeType } from './script'; +``` + +De esta forma, evitas casos extremos en los que el empaquetador de Astro podría intentar empaquetar erróneamente los tipos que has importado como si fueran JavaScript. + +Puedes configurar TypeScript para que exija el uso de importaciones de tipos en tu archivo `tsconfig.json`. Configura [`verbatimModuleSyntax`](https://www.typescriptlang.org/tsconfig#verbatimModuleSyntax) en `true`. TypeScript comprobará tus importaciones y te indicará cuándo debes usar `import type`. Esta configuración está activada por defecto en todos nuestros ajustes preestablecidos. + +```json title="tsconfig.json" ins={3} +{ + "compilerOptions": { + "verbatimModuleSyntax": true + } +} +``` + +## Alias de importación + +Astro soporta alias de importación que puedes definir en la configuración `paths` de tu archivo `tsconfig.json`. [Consulta nuestra guía de importaciones](/es/guides/imports/#aliases) para aprender más. + +```astro title="src/pages/about/nate.astro" "@components" "@layouts" +--- +import HolaMundo from '@components/HolaMundo.astro'; +import Layout from '@layouts/Layout.astro'; +--- +``` + +```json title="tsconfig.json" {4-5} +{ + "compilerOptions": { + "paths": { + "@components/*": ["./src/components/*"], + "@layouts/*": ["./src/layouts/*"] + } + } +} +``` + +## Extender tipos globales + +Puedes crear el archivo `src/env.d.ts` como convención para añadir declaraciones de tipos personalizados, o para aprovechar los tipos de Astro si no dispones de un archivo `tsconfig.json`: + +```ts title="src/env.d.ts" +// Declaraciones de tipos personalizados +declare var myString: string; + +// Tipos de Astro, no son necesarios si ya tienes un archivo `tsconfig.json`. +/// +``` + +### `window` y `globalThis` + +Es posible que quieras agregar una propiedad al objeto global. Para ello, puedes añadir declaraciones de nivel superior usando la palabra clave `declare` en tu archivo `env.d.ts`: + +```ts title="src/env.d.ts" +declare var myString: string; +declare function myFunction(): boolean; +``` + +Esto proporcionará un tipo a `globalThis.myString` y `globalThis.myFunction`, así como a `window.myString` y `window.myFunction`. + +Ten en cuenta que `window` solo está disponible en el código del lado del cliente. `globalThis` está disponible tanto en el lado del servidor como en el lado del cliente, pero su valor en el lado del servidor no se compartirá con el cliente. + +Si solo quieres definir una propiedad en el objeto `window`, proporciona una interfaz `Window` en su lugar: + +```ts title="src/env.d.ts" +interface Window { + myFunction(): boolean; +} +``` + +### Agregar atributos no estándar + +Es posible que quieras definir un tipo para atributos personalizados o CSS. Puedes extender las definiciones predeterminadas de JSX para añadir atributos no estándar redeclarando el namespace `astroHTML.JSX` en un archivo `.d.ts`. + +```ts title="src/env.d.ts" +declare namespace astroHTML.JSX { + interface HTMLAttributes { + 'data-count'?: number; + 'data-label'?: string; + } + + // Agrega una propiedad CSS personalizada al objeto de estilo + interface CSSProperties { + '--theme-color'?: 'black' | 'white'; + } +} +``` + +:::note +`astroHTML` se inyecta globalmente en los componentes `.astro`. Para usarlo en archivos de TypeScript, usa una [directiva de tres barras](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html): + +```ts +/// + +type MisAtributos = astroHTML.JSX.ImgHTMLAttributes; +``` +::: + +### Uso de importaciones + +Es posible que quieras extender los tipos globales reutilizando tipos declarados en otras partes de tu proyecto o procedentes de una librería externa. Para ello, usa [importaciones dinámicas](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import): + +```ts title="src/env.d.ts" +type Product = { + id: string; + name: string; + price: number; +}; + +declare namespace App { + interface Locals { + orders: Map + session: import('./lib/server/session').Session | null; + user: import('mi-lib-externa').User; + } +} +``` + +Un archivo `.d.ts` es una declaración de [módulo ambiental](https://www.typescriptlang.org/docs/handbook/modules/reference.html#ambient-modules). Aunque su sintaxis es similar a la de los módulos ES, estos archivos no permiten importaciones ni exportaciones de nivel superior. Si TypeScript encuentra uno, el archivo se considerará una [ampliación de módulo](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation) y esto romperá tus tipos globales. + +## Propiedades de componente + +Astro permite definir las propiedades de tus componentes con TypeScript. Para activarlo, añade una interfaz `Props` de TypeScript a la cabezera de tu componente. Se puede uasr una instrucción `export`, aunque no es necesario. La [extensión de Astro para VS Code](/es/editor-setup/) buscará automáticamente la interfaz `Props` y te proporcionará la compatibilidad adecuada con TypeScript cuando uses ese componente dentro de otra plantilla. + +```astro title="src/components/HelloProps.astro" ins={2-5} +--- +interface Props { + name: string; + greeting?: string; +} + +const { greeting = 'Hola', name } = Astro.props; +--- +

{greeting}, {name}!

+``` + +### Patrones habituales de tipos de propiedades + +- Si tu componente no admite propiedades ni contenido en slots, puedes usar `type Props = Record`. +- Si tu componente debe recibir elementos hijos en su slot predeterminado, puedes garantizarlo usando `type Props = { children: any; };`. + +## Utilidades de tipos + +

+ +Astro incluye algunos tipos de utilidades integrados para patrones comunes de tipos de propiedades. Están disponibles en el punto `astro/types` . + +### Atributos HTML integrados + +Astro proporciona el tipo `HTMLAttributes` para verificar que el código HTML utiliza atributos válidos. Puedes usar estos tipos para ayudarte a crear las propiedades de los componentes. + +Por ejemplo, si estuvieras creando un componente ``, podrías hacer lo siguiente para reflejar los atributos HTML predeterminados de las etiquetas `` en los tipos de propiedades de tu componente. + +```astro title="src/components/Link.astro" ins="HTMLAttributes" ins="HTMLAttributes<'a'>" +--- +import type { HTMLAttributes } from 'astro/types'; + +// usa un `type` +type Props = HTMLAttributes<'a'>; + +// o extiende con una `interface` +interface Props extends HTMLAttributes<'a'> { + myProp?: boolean; +} + +const { href, ...attrs } = Astro.props; +--- + + + +``` + +### Tipo `ComponentProps` + +

+ +Esta exportación de tipo te permite hacer referencia a los `Props` que acepta otro componente, aunque dicho componente no exporte directamente ese tipo de `Props`. + +El siguiente ejemplo muestra cómo usar la utilidad `ComponentProps` de `astro/types` para hacer referencia a los tipos de `Props` de un componente `